/* ==========================================================================
   Healthcare DME — Header rebuild
   --------------------------------------------------------------------------
   Restructures Avada's header into a modern storefront header: a slim utility
   bar, then a row with logo / prominent search / account + cart, then the
   category navigation.

   Avada emits the header markup, so this works by re-laying-out what is already
   there rather than replacing it — which keeps the mega-menu, the cart widget
   and the mobile menu toggle all functioning exactly as before.
   ========================================================================== */

/* Compact desktop bars; keep mobile navigation touch targets unchanged. */
@media (min-width: 1024px) {
	body.hdme-scope .fusion-secondary-header { padding-block: 0 !important; min-height: 0 !important; }
	body.hdme-scope .fusion-secondary-header .fusion-secondary-menu > ul > li,
	body.hdme-scope .fusion-secondary-header .fusion-secondary-menu > ul > li > a {
		height: 28px !important; min-height: 28px !important; line-height: 28px !important; padding-block: 0 !important;
	}
	body.hdme-scope .fusion-secondary-header a { min-height: 28px; }
}
@media (min-width: 1024px) {
	body.hdme-scope .fusion-header { padding-bottom: 6px; }
	body.hdme-scope .fusion-header .fusion-main-menu { padding-top: 4px !important; padding-bottom: 0 !important; }
	body.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu { margin-block: 0 !important; }
	body.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu > li > a,
	body.hdme-scope .fusion-main-menu.hdme-header-nav--sticky > ul.fusion-menu > li > a {
		min-height: 36px !important; padding-block: 6px !important;
	}
	body.hdme-scope .fusion-main-menu.hdme-header-nav--sticky { padding-top: 3px !important; padding-bottom: 3px !important; }
}

/* ---- Utility bar ------------------------------------------------------- */

.hdme-scope .fusion-secondary-header {
	background: var(--hdme-blue-800);
	border: 0;
	padding-block: 2px;
	font-size: var(--hdme-text-xs);
}
.hdme-scope .fusion-secondary-header .fusion-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hdme-space-4);
	flex-wrap: wrap;
}
.hdme-scope .fusion-secondary-header a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: rgba(255, 255, 255, 0.9);
	font-weight: var(--hdme-weight-medium);
}
.hdme-scope .fusion-secondary-header a:hover { color: #fff; }

/* ---- Main header row --------------------------------------------------- */

.hdme-scope .fusion-header {
	background: var(--hdme-surface);
	border-bottom: 1px solid var(--hdme-border);
	padding-block: var(--hdme-space-3);
}
.hdme-scope .fusion-header .fusion-row {
	display: flex;
	align-items: center;
	gap: var(--hdme-space-5);
}

.hdme-scope .fusion-logo {
	flex: 0 0 auto;
	margin: 0 !important;
}
.hdme-scope .fusion-logo img {
	max-height: 78px;
	max-width: 280px;
	width: 280px;
	height: auto;
}

/* Push the search box into the middle and let it take the space. */
.hdme-scope .fusion-main-menu {
	flex: 1 1 auto;
	min-width: 0;
}

/* Account + cart icons sit at the end, always 44px targets. */
.hdme-scope .fusion-secondary-menu,
.hdme-scope .fusion-main-menu .fusion-menu-cart,
.hdme-scope .fusion-main-menu .fusion-main-menu-search {
	flex: 0 0 auto;
}
.hdme-scope .fusion-main-menu-icon,
.hdme-scope .fusion-main-menu-search-open,
.hdme-scope .fusion-menu-cart-link {
	min-width: var(--hdme-tap-min);
	min-height: var(--hdme-tap-min);
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: var(--hdme-radius);
}
.hdme-scope .fusion-main-menu-icon:hover,
.hdme-scope .fusion-menu-cart-link:hover {
	background: var(--hdme-blue-50);
	color: var(--hdme-blue-700);
}

/* Cart count badge */
.hdme-scope .fusion-widget-cart-number,
.hdme-scope .fusion-menu-cart-item-count {
	background: var(--hdme-blue-600);
	color: #fff;
	border-radius: var(--hdme-radius-pill);
	font-size: 11px;
	font-weight: var(--hdme-weight-bold);
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	padding-inline: 5px;
}

/* ---- Always-visible search --------------------------------------------
   Avada hides search behind an icon. On a catalogue of 2,400+ products
   across 226 categories, search is the primary way in — it should not be
   one click away behind a magnifier. */

.hdme-searchbar {
	position: relative;
	flex: 1 1 420px;
	max-width: 560px;
	min-width: 0;
}
.hdme-searchbar form {
	display: flex;
	align-items: stretch;
	border: 2px solid var(--hdme-blue-200);
	border-radius: var(--hdme-radius-pill);
	overflow: hidden;
	background: var(--hdme-surface);
	transition: border-color var(--hdme-transition), box-shadow var(--hdme-transition);
}
.hdme-searchbar form:focus-within {
	border-color: var(--hdme-blue-500);
	box-shadow: 0 0 0 3px var(--hdme-blue-100);
}
.hdme-searchbar input[type="search"],
.hdme-searchbar input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: var(--hdme-space-2) var(--hdme-space-5);
	border: 0 !important;
	background: transparent;
	font-size: max(16px, var(--hdme-text-base));
	box-shadow: none !important;
}
.hdme-searchbar input:focus { outline: none; box-shadow: none !important; }
.hdme-searchbar button {
	flex: 0 0 auto;
	min-height: 44px;
	padding-inline: var(--hdme-space-5);
	border: 0;
	background: var(--hdme-blue-600);
	color: #fff;
	font-weight: var(--hdme-weight-semi);
	cursor: pointer;
}
.hdme-searchbar button:hover { background: var(--hdme-blue-700); }

/* Product suggestions; the normal form remains the no-JavaScript fallback. */
.hdme-live-search {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 10020;
	max-height: min(66vh, 520px);
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius-lg);
	background: #fff;
	box-shadow: 0 16px 38px rgba(21, 48, 80, 0.18);
}
.hdme-live-search[hidden] { display: none !important; }
.hdme-live-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 70px;
	padding: 8px;
	border-radius: var(--hdme-radius);
	color: var(--hdme-grey-800);
	text-decoration: none;
}
.hdme-live-search__item:hover,
.hdme-live-search__item.is-active {
	background: var(--hdme-blue-50);
	color: var(--hdme-blue-800);
}
.hdme-live-search__image {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border: 1px solid var(--hdme-border);
	border-radius: 8px;
	background: #fff;
}
.hdme-live-search__copy { min-width: 0; display: grid; gap: 3px; }
.hdme-live-search__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 14px;
	font-weight: var(--hdme-weight-semi);
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.hdme-live-search__price,
.hdme-live-search__price .amount {
	font-size: 14px !important;
	font-weight: var(--hdme-weight-bold);
	color: var(--hdme-grey-900);
}
.hdme-live-search__price del,
.hdme-live-search__price del .amount {
	font-size: 12px !important;
	font-weight: 400;
	color: var(--hdme-grey-500);
}
.hdme-live-search__status {
	padding: 18px 14px;
	color: var(--hdme-grey-600);
	font-size: 14px;
	text-align: center;
}
.hdme-live-search__status.is-error { color: var(--hdme-danger); }
.hdme-live-search__all {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	margin-top: 6px;
	border-radius: var(--hdme-radius);
	background: var(--hdme-blue-600);
	color: #fff;
	font-size: 14px;
	font-weight: var(--hdme-weight-semi);
	text-decoration: none;
}
.hdme-live-search__all:hover { background: var(--hdme-blue-700); color: #fff; }

@media (max-width: 1023px) {
	.hdme-scope .fusion-header .fusion-row { flex-wrap: wrap; }
	.hdme-searchbar { order: 10; flex: 1 1 100%; max-width: none; margin-top: var(--hdme-space-3); }
}

/* ---- Category navigation row ------------------------------------------- */

.hdme-scope .fusion-main-menu > ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	justify-content: center;
}
.hdme-scope .fusion-main-menu > ul > li > a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding-inline: var(--hdme-space-4);
	border-radius: var(--hdme-radius);
	font-size: var(--hdme-text-sm);
	font-family: var(--hdme-font-body) !important;
	font-weight: var(--hdme-weight-medium);
	letter-spacing: 0;
	text-transform: none;
	color: var(--hdme-grey-800);
}
.hdme-scope .fusion-main-menu > ul > li > a:hover,
.hdme-scope .fusion-main-menu > ul > li.current-menu-item > a,
.hdme-scope .fusion-main-menu > ul > li.current-menu-ancestor > a {
	background: var(--hdme-blue-50);
	color: var(--hdme-blue-700);
}
/* Avada draws an underline bar under the active item; the pill above replaces it. */
.hdme-scope .fusion-main-menu > ul > li > a::after,
.hdme-scope .fusion-main-menu .fusion-menu-highlight-bar { display: none !important; }

/* ---- Sticky behaviour --------------------------------------------------- */

.hdme-scope .fusion-is-sticky .fusion-header {
	box-shadow: var(--hdme-shadow);
}
.hdme-scope .fusion-is-sticky .fusion-secondary-header { display: none; }

/* ---- Mobile ------------------------------------------------------------- */

@media (max-width: 800px) {
	.hdme-scope .fusion-logo img { max-height: 54px; max-width: 210px; }
	.hdme-live-search { right: 4px; }
	.hdme-scope .fusion-header { padding-block: var(--hdme-space-2); }
	.hdme-scope .fusion-mobile-nav-holder > ul > li > a {
		min-height: var(--hdme-tap-min);
		font-size: var(--hdme-text-base);
		font-weight: var(--hdme-weight-medium);
	}
	.hdme-scope .fusion-mobile-nav-holder .sub-menu a {
		min-height: var(--hdme-tap-min);
		padding-left: var(--hdme-space-6);
		font-size: var(--hdme-text-sm);
	}
}

/* ---- Announcement / dismissible bar ------------------------------------- */

.hdme-scope .fusion-sliding-bar-wrapper,
.hdme-scope .awb-off-canvas-announcement {
	background: var(--hdme-blue-600);
	color: #fff;
	font-size: var(--hdme-text-sm);
}
.hdme-scope .fusion-sliding-bar-wrapper a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- The Google Translate widget ---------------------------------------
   It renders as a floating "Translate »" tab that lands on top of the hero.
   Anchored out of the content flow instead. */
.hdme-scope #google_language_translator,
.hdme-scope .goog-te-gadget,
.hdme-scope .glt-translate-trigger {
	position: fixed !important;
	left: auto !important;
	right: 12px !important;
	bottom: 12px !important;
	top: auto !important;
	z-index: 90;
	border-radius: var(--hdme-radius) !important;
	box-shadow: var(--hdme-shadow) !important;
}

/* ==========================================================================
   Header grid — corrected after measuring the real markup
   --------------------------------------------------------------------------
   Avada renders:
     .fusion-row (flex)
       .fusion-logo        block, float:left,  364px
       .fusion-main-menu   block, float:right, 920px

   The search field is injected through `avada_logo_append`, so it lands inside
   .fusion-logo — which, being a block, stacked it under the logo and squeezed
   the menu into three wrapped rows 283px tall.

   Resolved by making the header two explicit rows:
     row 1 — logo + search (+ cart/account, which Avada puts in the menu)
     row 2 — the category navigation, full width
   ========================================================================== */

.hdme-scope .fusion-header .fusion-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: var(--hdme-space-2);
	column-gap: var(--hdme-space-5);
}

/* Row 1 — logo and search share the line. */
.hdme-scope .fusion-header .fusion-logo {
	display: flex !important;
	align-items: center;
	gap: var(--hdme-space-5);
	flex: 1 1 auto;
	float: none !important;
	width: auto !important;
	max-width: none !important;
	order: 1;
	margin: 0 !important;
	padding: 0 !important;
}
.hdme-scope .fusion-header .fusion-logo-link {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.hdme-scope .fusion-header .hdme-searchbar {
	flex: 1 1 340px;
	max-width: 520px;
	margin: 0;
}

/* Row 2 — navigation across the full width. */
.hdme-scope .fusion-header .fusion-main-menu {
	order: 2;
	flex: 1 1 100%;
	float: none !important;
	width: 100% !important;
	height: auto !important;
	border-top: 1px solid var(--hdme-border);
	padding-top: var(--hdme-space-2);
}
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height: auto !important;
	gap: 2px;
}
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu > li {
	height: auto !important;
	float: none !important;
}
/* The cart and search-icon items push to the end of the nav row. */
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu > li.fusion-custom-menu-item,
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu > li.fusion-menu-cart {
	margin-left: auto;
}
/* Avada's own overlay search is redundant now that the field is always visible. */
.hdme-scope .fusion-header .fusion-overlay-search,
.hdme-scope .fusion-header li.fusion-main-menu-search { display: none !important; }

/* Kill the large filled block Avada paints behind the active menu item. */
.hdme-scope .fusion-header .fusion-main-menu > ul > li.current-menu-item > a {
	background: var(--hdme-blue-50);
	border-radius: var(--hdme-radius);
}

@media (max-width: 1023px) {
	.hdme-scope .fusion-header .fusion-logo { flex-wrap: wrap; }
	.hdme-scope .fusion-header .hdme-searchbar { flex: 1 1 100%; max-width: none; order: 3; }
}

/* ---- Nav row height ----------------------------------------------------
   Avada gives the active menu item a full-height filled block, which was
   stretching the nav row to 136px and painting a tall slab behind "HOME".
   Measured, then constrained: every item is a 44px pill on one line. */

.hdme-scope .fusion-header .fusion-main-menu,
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu,
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu > li {
	min-height: 0 !important;
	line-height: normal !important;
}
.hdme-scope .fusion-header .fusion-main-menu > ul.fusion-menu > li > a {
	height: auto !important;
	min-height: 44px !important;
	line-height: 1.2 !important;
	padding-block: var(--hdme-space-2) !important;
	background-image: none !important;
}
/* The slab itself. */
.hdme-scope .fusion-header .fusion-main-menu > ul > li.current-menu-item,
.hdme-scope .fusion-header .fusion-main-menu > ul > li.current_page_item {
	background: transparent !important;
}
.hdme-scope .fusion-header .fusion-main-menu > ul > li.current-menu-item > a,
.hdme-scope .fusion-header .fusion-main-menu > ul > li.current_page_item > a {
	background: var(--hdme-blue-50) !important;
	color: var(--hdme-blue-700) !important;
	border-radius: var(--hdme-radius) !important;
	border: 0 !important;
}
/* Avada also paints a highlight via a pseudo-element and a border. */
.hdme-scope .fusion-header .fusion-main-menu > ul > li > a::before,
.hdme-scope .fusion-header .fusion-main-menu > ul > li > a::after {
	display: none !important;
}

/* Logo + search: left-aligned, search given the room. */
.hdme-scope .fusion-header .fusion-logo { justify-content: flex-start; }
.hdme-scope .fusion-header .hdme-searchbar { flex: 1 1 420px; max-width: 620px; }

/* ==========================================================================
   Header actions — account + cart
   Avada's own cart <li> renders but its link markup does not carry the classes
   its icon styling expects, so the icon came out invisible. These two controls
   are owned by the header instead.
   ========================================================================== */

.hdme-headeractions {
	display: flex;
	align-items: center;
	gap: var(--hdme-space-2);
	flex: 0 0 auto;
	margin-left: auto;
}

.hdme-headeraction {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 60px;
	min-height: var(--hdme-tap-min);
	padding: var(--hdme-space-1) var(--hdme-space-2);
	border-radius: var(--hdme-radius);
	color: var(--hdme-grey-700);
	text-decoration: none;
	transition: background-color var(--hdme-transition), color var(--hdme-transition);
}
.hdme-headeraction:hover {
	background: var(--hdme-blue-50);
	color: var(--hdme-blue-700);
}
.hdme-headeraction__label {
	font-size: 11px;
	font-weight: var(--hdme-weight-semi);
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
}
.hdme-headeraction__icon { position: relative; display: inline-flex; }

.hdme-cartcount {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--hdme-radius-pill);
	background: var(--hdme-blue-600);
	color: #fff;
	font-size: 11px;
	font-weight: var(--hdme-weight-bold);
	line-height: 18px;
	text-align: center;
}
.hdme-cartcount.is-empty { display: none; }

/* Avada's own cart and search items are replaced by the controls above. */
.hdme-scope .fusion-header li.fusion-menu-cart,
.hdme-scope .fusion-header li.fusion-custom-menu-item-cart,
.hdme-scope .fusion-header li.fusion-main-menu-search { display: none !important; }

@media (max-width: 800px) {
	.hdme-headeraction { min-width: 48px; }
	.hdme-headeraction__label { display: none; }
}

/* ==========================================================================
   Dropdown text colour — a regression this redesign introduced
   --------------------------------------------------------------------------
   Avada's menus ship with white link text because its dropdown panel is dark.
   The redesign gave the panel a white card treatment but left the inherited
   colour alone, so every category label rendered white-on-white: 27 links
   present, correct URLs, and nothing visible.

   Measured on a closed dropdown: color rgb(255,255,255), font-size 12px.
   ========================================================================== */

.hdme-scope .fusion-main-menu .sub-menu,
.hdme-scope .fusion-megamenu-wrapper,
.hdme-scope .fusion-megamenu-holder {
	background: var(--hdme-surface) !important;
}

.hdme-scope .fusion-main-menu .sub-menu li a,
.hdme-scope .fusion-main-menu .sub-menu li a span,
.hdme-scope .fusion-megamenu-wrapper li a,
.hdme-scope .fusion-megamenu-wrapper li a span,
.hdme-scope .fusion-main-menu .sub-menu .fusion-menu-description {
	color: var(--hdme-grey-700) !important;
	font-size: var(--hdme-text-sm) !important;
}

.hdme-scope .fusion-main-menu .sub-menu li a:hover,
.hdme-scope .fusion-main-menu .sub-menu li a:hover span,
.hdme-scope .fusion-megamenu-wrapper li a:hover,
.hdme-scope .fusion-megamenu-wrapper li a:hover span {
	color: var(--hdme-blue-700) !important;
	background-color: transparent;
}
.hdme-scope .fusion-main-menu .sub-menu li a:hover,
.hdme-scope .fusion-megamenu-wrapper li a:hover { background: var(--hdme-blue-50) !important; }

/* Avada paints the active category red; every label remains white on it. */
.hdme-scope .fusion-main-menu .sub-menu li.current-menu-item > a,
.hdme-scope .fusion-main-menu .sub-menu li.current-menu-item > a span:not(.hdme-menuthumb),
.hdme-scope .fusion-main-menu .sub-menu li.current-menu-parent > a,
.hdme-scope .fusion-main-menu .sub-menu li.current-menu-parent > a span:not(.hdme-menuthumb),
.hdme-scope .fusion-main-menu .sub-menu li.current-menu-ancestor > a,
.hdme-scope .fusion-main-menu .sub-menu li.current-menu-ancestor > a span:not(.hdme-menuthumb) {
	background-color: var(--hdme-danger) !important;
	color: #fff !important;
}

/* 27 categories in one column is a long, thin list. Two columns fit better. */
@media (min-width: 900px) {
	.hdme-scope .fusion-main-menu > ul > li > .sub-menu {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(220px, 1fr));
		gap: 2px var(--hdme-space-2);
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%);
		width: auto !important;
		min-width: 520px;
		max-height: min(64vh, 460px);
		overflow-y: auto;
		border: 1px solid rgba(33, 69, 116, 0.14);
		border-radius: var(--hdme-radius-lg);
		box-shadow: 0 18px 44px rgba(21, 48, 80, 0.24) !important;
	}
	.hdme-scope .fusion-main-menu > ul > li > .sub-menu > li { width: auto !important; }
}

/* Mega-menu column titles keep their own weight. */
.hdme-scope .fusion-megamenu-title,
.hdme-scope .fusion-megamenu-title a,
.hdme-scope .fusion-megamenu-title a span {
	color: var(--hdme-grey-900) !important;
	font-weight: var(--hdme-weight-bold) !important;
}

/* ==========================================================================
   Dropdown with category thumbnails
   ========================================================================== */

.hdme-scope .fusion-main-menu .sub-menu li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 4px var(--hdme-space-2) !important;
	line-height: var(--hdme-leading-snug);
}

.hdme-menuthumb {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--hdme-border);
	border-radius: var(--hdme-radius);
	background: var(--hdme-grey-25);
	overflow: hidden;
}
/* Keep images on a neutral tile in active, hover and focus states. */
.hdme-scope .fusion-main-menu .sub-menu li a .hdme-menuthumb {
	background: #fff !important;
}
.hdme-menuthumb__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: normal;
	display: block;
}

/* Links without a thumbnail keep their text aligned with the ones that have one. */
.hdme-scope .fusion-main-menu .sub-menu li a > span:not(.hdme-menuthumb) {
	flex: 1 1 auto;
	min-width: 0;
}

/* Wider panel now that each row carries an image. */
@media (min-width: 900px) {
	.hdme-scope .fusion-main-menu > ul > li > .sub-menu {
		grid-template-columns: repeat(2, minmax(260px, 1fr));
		min-width: 600px;
		padding: var(--hdme-space-2);
	}
}
@media (min-width: 1024px) {
	.hdme-scope .fusion-main-menu > ul > li > .sub-menu {
		grid-template-columns: repeat(3, minmax(250px, 1fr));
		width: min(900px, calc(100vw - 48px)) !important;
		min-width: min(820px, calc(100vw - 48px));
	}
}

/* Nine of the 27 menu links point at ordinary pages rather than product
   categories, so they have no term thumbnail. Without a placeholder their
   labels start further left than the rest and the column looks ragged. */
.hdme-scope .fusion-main-menu .sub-menu li a::before {
	content: "";
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border: 1px dashed var(--hdme-border);
	border-radius: var(--hdme-radius);
	background: var(--hdme-grey-25);
}
.hdme-scope .fusion-main-menu .sub-menu li a:has(.hdme-menuthumb)::before { display: none; }

/* Compact launcher for the existing Tawk chat service. */
.hdme-chat-launcher {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 99990;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--hdme-blue-600);
	color: #fff;
	box-shadow: 0 8px 22px rgba(21, 60, 120, 0.28);
	cursor: pointer;
	transition: transform var(--hdme-transition), background-color var(--hdme-transition), bottom var(--hdme-transition);
}
.hdme-chat-launcher:hover,
.hdme-chat-launcher:focus-visible {
	background: var(--hdme-blue-700);
	color: #fff;
	transform: translateY(-2px);
}
.hdme-chat-launcher.is-loading { animation: hdme-chat-pulse 0.8s ease-in-out infinite alternate; }
.hdme-sticky-cart-visible .hdme-chat-launcher { bottom: 96px; }
@keyframes hdme-chat-pulse { to { opacity: 0.55; } }

@media (max-width: 600px) {
	.hdme-chat-launcher {
		right: 14px;
		bottom: 14px;
		width: 52px;
		height: 52px;
	}
	.hdme-sticky-cart-visible .hdme-chat-launcher { bottom: 86px; }
}

/* ========================================================================
   Compact announcement ticker
   ===================================================================== */

.hdme-scope .woocommerce-store-notice.demo_store {
	/* WooCommerce renders this at wp_body_open. Keep its space in normal flow:
	   Google Translate can make body relative, which displaced an absolute notice. */
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 10020 !important;
	display: flex !important;
	align-items: center;
	width: 100%;
	height: 34px;
	min-height: 34px;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	border: 0 !important;
	background: #b42318 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: var(--hdme-weight-medium);
	line-height: 1 !important;
	white-space: nowrap;
	box-shadow: none !important;
}

.hdme-scope .woocommerce-store-notice__dismiss-link {
	display: none !important;
}

/* The notice now supplies its own height; do not reserve that space twice.
   WordPress already offsets the document for its admin toolbar. */
body.hdme-scope.woocommerce-demo-store #wrapper {
	margin-top: 0 !important;
}

.hdme-notice-marquee {
	display: flex;
	flex: 0 0 auto;
	width: max-content;
	will-change: transform;
	animation: hdme-notice-scroll 30s linear infinite;
}

.hdme-notice-marquee__group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-around;
	min-width: 100vw;
	gap: 72px;
	padding-right: 72px;
}

.hdme-notice-marquee__item {
	flex: 0 0 auto;
	color: #fff;
}

@keyframes hdme-notice-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hdme-notice-marquee { animation: none; }
}

@media (max-width: 767px) {
	.hdme-scope .woocommerce-store-notice.demo_store {
		top: 0 !important;
		height: 30px;
		min-height: 30px;
		font-size: 11px !important;
	}

	.hdme-notice-marquee { animation-duration: 24s; }
	.hdme-notice-marquee__group { gap: 48px; padding-right: 48px; }
}

/* ========================================================================
   Desktop navigation-only sticky header
   ===================================================================== */

.hdme-header-nav-placeholder { display: none; }

@media (min-width: 1024px) {
	.hdme-header-nav-placeholder.is-active {
		display: block;
		order: 2;
		flex: 1 1 100%;
		width: 100%;
	}

	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10010;
		width: 100% !important;
		display: block !important;
		float: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 5px max(28px, calc((100vw - 1200px) / 2)) !important;
		border-top: 0 !important;
		border-bottom: 1px solid var(--hdme-border) !important;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0 8px 24px rgba(21, 48, 80, 0.14);
		backdrop-filter: blur(10px);
		overflow: visible !important;
	}

	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky > ul.fusion-menu {
		display: flex !important;
		align-items: center;
		justify-content: center;
		max-width: 1200px;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 auto;
	}

	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky > ul.fusion-menu > li {
		height: auto !important;
		min-height: 0 !important;
	}

	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky > ul.fusion-menu > li > a {
		height: auto !important;
		min-height: 44px !important;
		padding-block: var(--hdme-space-2) !important;
		line-height: 1.2 !important;
	}

	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky li.fusion-menu-cart,
	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky li.fusion-custom-menu-item-cart,
	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky li.fusion-main-menu-search {
		display: none !important;
	}

	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky > ul > li:hover > .sub-menu,
	.hdme-scope .fusion-main-menu.hdme-header-nav--sticky > ul > li:focus-within > .sub-menu {
		top: 100% !important;
		z-index: 10030 !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}