/* Mega Menu Header + Drawer + Live Search - Frontend Styles */

.fiw-mm-header {
	position: relative;
	width: 100%;
	background-color: #FFFFFF;
	z-index: 999;
}

.fiw-mm-header.fiw-sticky {
	position: sticky;
	top: 0;
}

.fiw-mm-container {
	display: flex;
	align-items: center;
	gap: 30px;
}

.fiw-mm-logo {
	display: inline-flex;
	flex-shrink: 0;
}

.fiw-mm-logo img {
	width: 140px;
	height: auto;
	display: block;
}

/* ---------- Desktop Menu ---------- */

.fiw-mm-nav {
	flex: 1;
}

.fiw-mm-menu {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fiw-mm-item {
	position: relative;
}

.fiw-mm-link-row {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.fiw-mm-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	color: #0C3C48;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.fiw-mm-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	background-color: #1CA8BD;
	color: #fff;
	line-height: 1.4;
}

.fiw-mm-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	outline: none;
	padding: 4px;
	cursor: pointer;
	color: #1CA8BD;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.25s ease;
}

.fiw-mm-caret:hover,
.fiw-mm-caret:focus,
.fiw-mm-caret:active {
	color: #1CA8BD;
}

.fiw-mm-item.fiw-open .fiw-mm-caret {
	transform: rotate(180deg);
}

/* ---------- Mega Panel ---------- */

.fiw-has-mega .fiw-mega-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: max-content;
	max-width: min(1100px, calc(100vw - 32px));
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(12, 60, 72, 0.12);
	padding: 28px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	z-index: 50;
}

.fiw-mm-item.fiw-open .fiw-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.fiw-mega-fade .fiw-mega-panel {
	transform: translateX(-50%);
}

.fiw-mega-fade.fiw-mm-item.fiw-open .fiw-mega-panel,
.fiw-mm-item.fiw-open .fiw-mega-fade {
	transform: translateX(-50%);
}

.fiw-mega-grid {
	display: flex;
	gap: 48px;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
}

.fiw-mega-col {
	min-width: 140px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fiw-mega-col-title {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #0C3C48;
}

.fiw-mega-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.fiw-mega-col li {
	margin-bottom: 10px;
}

.fiw-mega-col a {
	text-decoration: none;
	font-size: 14px;
	color: #374151;
	transition: color 0.25s ease;
}

.fiw-mega-promo {
	width: 240px;
	text-align: center;
	border-radius: 8px;
	overflow: hidden;
}

.fiw-mega-promo img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	margin-bottom: 14px;
}

.fiw-mega-promo-title {
	margin: 0 0 6px;
	font-size: 15px;
	color: #0C3C48;
}

.fiw-mega-promo-text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: #6B7280;
}

.fiw-mega-promo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 18px;
	border-radius: 50px;
	background-color: #1CA8BD;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

/* ---------- Actions (search, CTA, hamburger) ---------- */

.fiw-mm-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.fiw-mm-search {
	position: relative;
	display: flex;
	align-items: center;
	height: 40px;
}

.fiw-mm-search-toggle,
.fiw-mm-drawer-close,
.fiw-mm-caret,
.fiw-mm-drawer-toggle {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}

.fiw-mm-search-toggle,
.fiw-mm-search-toggle:hover,
.fiw-mm-search-toggle:focus,
.fiw-mm-search-toggle:active,
.fiw-mm-search-toggle:visited {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	color: #0C3C48 !important;
	background: none !important;
	border-radius: 50%;
}

.fiw-mm-search-toggle svg {
	position: absolute;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.fiw-mm-search-toggle .fiw-icon-search {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

.fiw-mm-search-toggle .fiw-icon-close {
	opacity: 0;
	transform: scale(0.4) rotate(-90deg);
}

.fiw-mm-search.fiw-open .fiw-mm-search-toggle .fiw-icon-search {
	opacity: 0;
	transform: scale(0.4) rotate(90deg);
}

.fiw-mm-search.fiw-open .fiw-mm-search-toggle .fiw-icon-close {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Expanding pill bar lives in the header row itself, growing from the
   icon outward and overlaying whatever sits behind it (without moving
   the logo, menu, or CTA out of place). Uses clip-path so box-shadow
   is never clipped by overflow:hidden. */
.fiw-mm-search-box {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	height: 44px;
	width: 320px;
	border-radius: 50px;
	background-color: #fff;
	box-shadow: 0 4px 24px rgba(12, 60, 72, 0.14);
	transition: clip-path 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	clip-path: inset(0 0 0 100% round 50px);
	opacity: 0;
	pointer-events: none;
	z-index: 2;
}

.fiw-mm-search.fiw-open .fiw-mm-search-box {
	clip-path: inset(0 0 0 0% round 50px);
	opacity: 1;
	pointer-events: auto;
}

.fiw-mm-search-input {
	width: 100%;
	height: 44px;
	box-sizing: border-box;
	padding: 0 50px 0 20px;
	border: none;
	border-radius: 50px;
	background-color: transparent;
	color: #0C3C48;
	font-size: 14px;
	outline: none;
}

.fiw-mm-search-results {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 320px;
	max-height: 420px;
	overflow-y: auto;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(12, 60, 72, 0.14);
	display: none;
	z-index: 59;
}

.fiw-mm-search-results.fiw-has-results {
	display: block;
}

.fiw-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.fiw-search-result img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.fiw-search-result-title {
	font-size: 13px;
	color: #0C3C48;
	line-height: 1.4;
}

.fiw-search-result-price {
	font-size: 12px;
	color: #1CA8BD;
	margin-top: 2px;
}

.fiw-search-empty,
.fiw-search-loading {
	padding: 14px;
	font-size: 13px;
	color: #6B7280;
	text-align: center;
}

.fiw-mm-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 50px;
	background-color: #0C3C48;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* ---------- Hamburger ---------- */

.fiw-mm-hamburger {
	--fiw-burger-size: 24px;
	--fiw-bar-thickness: 2px;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: var(--fiw-burger-size);
	height: var(--fiw-burger-size);
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

.fiw-mm-hamburger span {
	display: block;
	width: 100%;
	height: var(--fiw-bar-thickness);
	background-color: #0C3C48;
	border-radius: 4px;
	transition: transform 0.35s ease, opacity 0.35s ease, background-color 0.35s ease;
	transform-origin: center;
}

.fiw-mm-hamburger.fiw-active span:nth-child(1) {
	transform: translateY(calc(var(--fiw-burger-size) / 2 - var(--fiw-bar-thickness) / 2)) rotate(45deg);
}

.fiw-mm-hamburger.fiw-active span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.fiw-mm-hamburger.fiw-active span:nth-child(3) {
	transform: translateY(calc(-1 * (var(--fiw-burger-size) / 2 - var(--fiw-bar-thickness) / 2))) rotate(-45deg);
}

/* ---------- Drawer + Overlay ---------- */

.fiw-mm-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(12, 60, 72, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
	z-index: 998;
}

.fiw-mm-overlay.fiw-active {
	opacity: 1;
	visibility: visible;
}

.fiw-mm-drawer {
	--fiw-drawer-width: 320px;
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--fiw-drawer-width);
	max-width: 90vw;
	background-color: #fff;
	z-index: 999;
	overflow-y: auto;
	padding: 24px 20px 40px;
	box-sizing: border-box;
	transition: transform 0.35s ease;
	box-shadow: 0 0 40px rgba(12, 60, 72, 0.2);
	/* Flex + explicit order below guarantees the visual stacking order of the
	   drawer's direct children (close button -> search -> nav -> top links ->
	   CTA) regardless of any future markup/DOM changes, caching, or other
	   plugins re-parenting nodes. Don't rely on source order alone here. */
	display: flex !important;
	flex-direction: column !important;
}

.fiw-mm-drawer-close {
	order: 0 !important;
}

.fiw-mm-drawer-search.fiw-mm-search-box {
	order: 1 !important;
}

.fiw-mm-search-results.fiw-mm-drawer-search {
	order: 2 !important;
}

.fiw-mm-drawer-menu {
	order: 3 !important;
}

.fiw-mm-drawer-top-links-wrap {
	order: 4 !important;
}

.fiw-mm-drawer-cta {
	order: 5 !important;
}

.fiw-mm-drawer-right {
	right: 0;
	transform: translateX(100%);
}

.fiw-mm-drawer-left {
	left: 0;
	transform: translateX(-100%);
}

.fiw-mm-drawer.fiw-active {
	transform: translateX(0);
}

.fiw-mm-drawer-close {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	min-width: 36px;
	margin-left: auto;
	margin-bottom: 18px;
	cursor: pointer;
	opacity: 0;
	transform: rotate(-90deg) scale(0.7);
	transition: opacity 0.3s ease 0.15s, transform 0.3s ease 0.15s;
}

.fiw-mm-drawer.fiw-active .fiw-mm-drawer-close {
	opacity: 1 !important;
	transform: rotate(0deg) scale(1) !important;
}

/* Two-line X drawn with pseudo-elements — zero dependency on CSS vars */
.fiw-mm-drawer-close span {
	display: none; /* spans hidden; we use pseudo-elements instead */
}

.fiw-mm-drawer-close::before,
.fiw-mm-drawer-close::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background-color: #0C3C48;
	border-radius: 4px;
	transform-origin: center;
}

.fiw-mm-drawer-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.fiw-mm-drawer-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.fiw-mm-drawer-search.fiw-mm-search-box {
	position: relative;
	opacity: 1;
	visibility: visible;
	transform: none;
	/* The base .fiw-mm-search-box rule (used by the collapsible header pill
	   variant) sets clip-path to fully clip the box and pointer-events:none
	   until it's "open". The drawer search is always open/static, so both
	   must be explicitly reset here — otherwise the box is invisible and
	   unclickable no matter what opacity/visibility say. */
	clip-path: none;
	pointer-events: auto;
	width: 100%;
	height: 44px;
	border-radius: 8px;
	box-shadow: none;
	background-color: #F4F8F9;
	margin-bottom: 20px;
}

.fiw-mm-drawer-search.fiw-mm-search-box .fiw-mm-search-input {
	width: 100%;
	height: 100%;
	background-color: #F4F8F9;
	border-radius: 8px;
	padding-right: 44px;
}

.fiw-mm-search-results.fiw-mm-drawer-search {
	position: static;
	width: 100%;
	box-shadow: none;
	border: 1px solid #E8F4F8;
	margin-bottom: 10px;
}

.fiw-mm-drawer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fiw-mm-drawer-item {
	border-bottom: 1px solid #E8F4F8;
}

/* The last nav item's own closing border sat directly next to the top
   links section's border-top, reading as a "double border". Only the
   section divider below is needed, so the last nav item doesn't draw one. */
.fiw-mm-drawer-item:last-child {
	border-bottom: none;
}

/* Defensive reset: the collapsed submenu must never contribute its own
   border, even if a theme/global stylesheet applies a default border to
   nested ul/li elements. */
.fiw-mm-drawer-submenu,
.fiw-mm-drawer-submenu ul,
.fiw-mm-drawer-submenu li {
	border: none;
}

.fiw-mm-drawer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fiw-mm-drawer-row a {
	flex: 1;
	display: block;
	padding: 14px 0;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
	color: #0C3C48;
	transition: color 0.25s ease;
}

.fiw-mm-drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
}

.fiw-mm-drawer-caret {
	display: inline-flex;
	color: #1CA8BD;
	transition: transform 0.3s ease;
}

.fiw-mm-drawer-item.fiw-open .fiw-mm-drawer-caret {
	transform: rotate(180deg);
}

.fiw-mm-drawer-submenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.fiw-mm-drawer-item.fiw-open .fiw-mm-drawer-submenu {
	max-height: 1000px;
}

.fiw-mm-drawer-submenu ul {
	list-style: none;
	margin: 0;
	padding: 0 0 14px 14px;
}

.fiw-mm-drawer-submenu li {
	margin-bottom: 4px;
}

.fiw-mm-drawer-col-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9CA3AF;
	margin-top: 12px;
}

.fiw-mm-drawer-submenu a {
	display: block;
	padding: 7px 0;
	font-size: 14px;
	text-decoration: none;
	color: #374151;
}

/* ---------- Mobile promo card ----------
   Mirrors the desktop .fiw-mega-promo card (image, title, text, button)
   instead of the bare text link it previously fell back to on mobile,
   which is why the promo appeared to be missing in the drawer. */
.fiw-mm-drawer-submenu li.fiw-mm-drawer-promo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background-color: #F4F8F9;
	border-radius: 10px;
	padding: 14px;
	margin: 4px 0 14px -14px;
	width: calc(100% + 14px);
	box-sizing: border-box;
}

.fiw-mm-drawer-promo img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 8px;
	display: block;
	margin-bottom: 12px;
}

.fiw-mm-drawer-promo-title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: #0C3C48;
	margin-bottom: 4px;
}

.fiw-mm-drawer-promo-text {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: #6B7280;
	margin-bottom: 12px;
}

.fiw-mm-drawer-promo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 8px 18px;
	border-radius: 50px;
	background-color: #1CA8BD;
	color: #fff;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
}

/* ---------- Responsive breakpoints ---------- */

.fiw-bp-768 .fiw-mm-nav,
.fiw-bp-768 .fiw-mm-cta {
	display: flex;
}

@media (max-width: 768px) {
	.fiw-bp-768 .fiw-mm-nav,
	.fiw-bp-768 .fiw-mm-actions .fiw-mm-cta,
	.fiw-bp-768 .fiw-mm-search {
		display: none;
	}
	.fiw-bp-768 .fiw-mm-hamburger {
		display: flex;
	}
}

@media (max-width: 992px) {
	.fiw-bp-992 .fiw-mm-nav,
	.fiw-bp-992 .fiw-mm-actions .fiw-mm-cta,
	.fiw-bp-992 .fiw-mm-search {
		display: none;
	}
	.fiw-bp-992 .fiw-mm-hamburger {
		display: flex;
	}
}

@media (max-width: 1024px) {
	.fiw-bp-1024 .fiw-mm-nav,
	.fiw-bp-1024 .fiw-mm-actions .fiw-mm-cta,
	.fiw-bp-1024 .fiw-mm-search {
		display: none;
	}
	.fiw-bp-1024 .fiw-mm-hamburger {
		display: flex;
	}
}

@media (max-width: 480px) {
	.fiw-mm-search-box.fiw-mm-drawer-search {
		width: 100%;
	}
}

/* ---------- Unconditional failsafe ----------
   Guarantees the drawer/hamburger pattern always works at small widths
   even if, for any reason (caching, an old saved instance missing the
   breakpoint setting, etc.), the dynamic .fiw-bp-XXX class fails to
   match. This always wins at narrow widths because it has no class
   dependency, and is harmless at wider widths since the media query
   itself won't apply there. */
@media (max-width: 600px) {
	.fiw-mm-nav,
	.fiw-mm-actions .fiw-mm-cta,
	.fiw-mm-search {
		display: none !important;
	}
	.fiw-mm-hamburger {
		display: flex !important;
	}
}

/* =========================================================
   TWO-ROW HEADER LAYOUT
   ========================================================= */

.fiw-mm-two-row {
	display: block;
	padding: 0;
}

.fiw-mm-two-row .fiw-mm-row {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.fiw-mm-row-1 {
	background-color: #FFFFFF;
	gap: 24px;
	padding: 14px 30px;
}

.fiw-mm-row-2 {
	background-color: #0C3C48;
	padding: 12px 30px;
	justify-content: center;
}

.fiw-mm-row-2 .fiw-mm-nav {
	flex: 0 1 auto;
	width: 100%;
}

.fiw-mm-row-2 .fiw-mm-menu {
	justify-content: center;
	gap: 36px;
}

.fiw-mm-row-2 .fiw-mm-link,
.fiw-mm-row-2 .fiw-mm-link span {
	color: #FFFFFF;
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.01em;
}

.fiw-mm-row-2 .fiw-mm-caret {
	color: #FFFFFF;
}

.fiw-mm-row-2 .fiw-mm-link:hover,
.fiw-mm-row-2 .fiw-mm-item.fiw-open .fiw-mm-link {
	color: #7FE7F5;
}

/* Row 1 — Top Links */
.fiw-mm-top-links {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
}

.fiw-mm-top-links li {
	margin: 0;
}

.fiw-mm-top-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	color: #0C3C48;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.fiw-mm-top-link:hover {
	color: #1CA8BD;
}

.fiw-mm-top-link-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 14px;
}
.fiw-mm-top-link-icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Row 1 — persistent search pill (no toggle button) */
.fiw-mm-search-inline {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 1 340px;
	height: 42px;
}

.fiw-mm-search-inline .fiw-mm-search-box.fiw-mm-search-persistent {
	position: relative;
	top: auto;
	right: auto;
	transform: none;
	width: 100%;
	height: 42px;
	clip-path: none;
	opacity: 1;
	pointer-events: auto;
	background-color: #F4F8F9;
	box-shadow: none;
	border: 1px solid #E5EDF0;
	border-radius: 50px;
}

.fiw-mm-search-inline .fiw-mm-search-persistent .fiw-mm-search-input {
	height: 42px;
	padding: 0 44px 0 20px;
	background: transparent;
	font-size: 14px;
}

/* Search icon button — lives inside .fiw-mm-search-box (header pill and
   drawer search both use this), so .fiw-mm-search-box needs position:relative
   wherever it appears. */
.fiw-mm-search-submit {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	color: #0C3C48;
	cursor: pointer;
	border-radius: 50%;
	z-index: 2;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fiw-mm-search-submit svg {
	display: block;
	pointer-events: none;
}

.fiw-mm-search-submit:hover,
.fiw-mm-search-submit:focus-visible {
	background-color: rgba(12, 60, 72, 0.08);
}

.fiw-mm-search-inline .fiw-mm-search-results.fiw-mm-search-persistent {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	width: auto;
}

/* Row 1 right group — wraps the top links + CTA + hamburger together so this
   whole cluster always sits flush right as one unit. This is deliberately a
   single wrapper (rather than margin-left:auto on individual children) so the
   hamburger doesn't get displaced when top-links/CTA are hidden on mobile. */
.fiw-mm-row-1-right {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	margin-left: auto;
}

.fiw-mm-row-1-actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

/* CTA acts as phone pill by default text can be anything */
.fiw-mm-two-row .fiw-mm-cta {
	background-color: #0C3C48;
	color: #FFFFFF;
}

/* Drawer additions for top links + drawer CTA */
.fiw-mm-drawer-top-links-wrap {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid #E8F4F8;
}

.fiw-mm-drawer-top-links {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fiw-mm-drawer-top-links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	text-decoration: none;
	font-size: 14px;
	color: #0C3C48;
}

.fiw-mm-drawer-cta {
	display: inline-flex !important;
	width: 100%;
	justify-content: center;
	margin-top: 12px;
}

/* Responsive: hide row 2 + top links + inline search on mobile */
@media (max-width: 992px) {
	.fiw-bp-992 .fiw-mm-row-2,
	.fiw-bp-992 .fiw-mm-top-links,
	.fiw-bp-992 .fiw-mm-search-inline,
	.fiw-bp-992 .fiw-mm-row-1-actions .fiw-mm-cta {
		display: none !important;
	}
	.fiw-bp-992 .fiw-mm-hamburger {
		display: flex !important;
	}
}

@media (max-width: 1024px) {
	.fiw-bp-1024 .fiw-mm-row-2,
	.fiw-bp-1024 .fiw-mm-top-links,
	.fiw-bp-1024 .fiw-mm-search-inline,
	.fiw-bp-1024 .fiw-mm-row-1-actions .fiw-mm-cta {
		display: none !important;
	}
	.fiw-bp-1024 .fiw-mm-hamburger {
		display: flex !important;
	}
}

@media (max-width: 768px) {
	.fiw-bp-768 .fiw-mm-row-2,
	.fiw-bp-768 .fiw-mm-top-links,
	.fiw-bp-768 .fiw-mm-search-inline,
	.fiw-bp-768 .fiw-mm-row-1-actions .fiw-mm-cta {
		display: none !important;
	}
	.fiw-bp-768 .fiw-mm-hamburger {
		display: flex !important;
	}
}

@media (max-width: 600px) {
	.fiw-mm-row-2,
	.fiw-mm-top-links,
	.fiw-mm-search-inline,
	.fiw-mm-row-1-actions .fiw-mm-cta {
		display: none !important;
	}
	.fiw-mm-hamburger {
		display: flex !important;
	}
}

/* =========================================================
   ROBUST FIX (v suffix): drawer search position + promo btn
   Higher-specificity + !important so theme / global CSS
   loaded after this file cannot defeat these rules.
   ========================================================= */

/* --- Drawer flex stacking (guarantee vertical order) --- */
aside.fiw-mm-drawer {
	display: flex !important;
	flex-direction: column !important;
}
aside.fiw-mm-drawer > .fiw-mm-drawer-close        { order: 0 !important; }
aside.fiw-mm-drawer > .fiw-mm-search-box.fiw-mm-drawer-search        { order: 1 !important; }
aside.fiw-mm-drawer > .fiw-mm-search-results.fiw-mm-drawer-search    { order: 2 !important; }
aside.fiw-mm-drawer > .fiw-mm-drawer-menu         { order: 3 !important; }
aside.fiw-mm-drawer > .fiw-mm-drawer-top-links-wrap { order: 4 !important; }
aside.fiw-mm-drawer > .fiw-mm-drawer-cta          { order: 5 !important; }

/* --- Drawer search box: kill the base "absolute pill" positioning --- */
aside.fiw-mm-drawer .fiw-mm-search-box.fiw-mm-drawer-search {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 46px !important;
	margin: 0 0 18px 0 !important;
	padding: 0 !important;
	border-radius: 10px !important;
	background-color: #F4F8F9 !important;
	border: 1px solid #E5EDF0 !important;
	box-shadow: none !important;
	clip-path: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: auto !important;
	flex: 0 0 auto !important;
	align-self: stretch !important;
}

aside.fiw-mm-drawer .fiw-mm-search-box.fiw-mm-drawer-search .fiw-mm-search-input {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	padding: 0 46px 0 16px !important;
	background: transparent !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	color: #0C3C48 !important;
	box-shadow: none !important;
}

aside.fiw-mm-drawer .fiw-mm-search-box.fiw-mm-drawer-search .fiw-mm-search-submit {
	position: absolute !important;
	top: 50% !important;
	right: 6px !important;
	transform: translateY(-50%) !important;
	width: 34px !important;
	height: 34px !important;
}

/* Drawer results list — sits directly under the input, never floats */
aside.fiw-mm-drawer .fiw-mm-search-results.fiw-mm-drawer-search {
	position: static !important;
	top: auto !important;
	right: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: -8px 0 14px 0 !important;
	border: 1px solid #E5EDF0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
}

/* --- Promo card CTA button (drawer) --- */
aside.fiw-mm-drawer .fiw-mm-drawer-promo .fiw-mm-drawer-promo-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: stretch !important;
	width: 100% !important;
	min-height: 42px;
	padding: 11px 22px !important;
	margin-top: 4px;
	border: 0;
	border-radius: 999px !important;
	background-color: #1CA8BD !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 6px 16px -6px rgba(28, 168, 189, 0.55);
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

aside.fiw-mm-drawer .fiw-mm-drawer-promo .fiw-mm-drawer-promo-btn:hover,
aside.fiw-mm-drawer .fiw-mm-drawer-promo .fiw-mm-drawer-promo-btn:focus-visible {
	background-color: #158B9E !important;
	box-shadow: 0 8px 20px -6px rgba(21, 139, 158, 0.65);
	transform: translateY(-1px);
	outline: none;
}

aside.fiw-mm-drawer .fiw-mm-drawer-promo .fiw-mm-drawer-promo-btn:active {
	transform: translateY(0);
	box-shadow: 0 4px 10px -4px rgba(21, 139, 158, 0.55);
}