/*
 * IHT Header
 *
 * Order matters in this file: tokens, base, components, then the responsive
 * blocks at the very end. A rule written after a media query block with the
 * same weight would undo it (same specificity, later wins).
 *
 * Selectors carry two classes on purpose: the Elementor kit styles a, p,
 * button and headings with (0,1,1), and one class alone loses to it.
 *
 * Breakpoints (measured, not guessed):
 *   >= 1400px  full desktop, as drawn in Figma at 1440
 *   1280-1399  compact desktop, same layout with tighter spacing
 *   <  1280    hamburger + drawer (the top row needs ~1130px even when compact)
 *   <  768     phone: only search, basket and menu in the top row
 */

/* ---------- Tokens ---------- */

.iht-hdr {
	--iht-blue: #3b44b5;
	--iht-ink: #000;
	--iht-ink-75: rgba(0, 0, 0, 0.75);
	--iht-grey: #4c4c4c;
	--iht-rule: rgba(76, 77, 78, 0.1);
	--iht-bg-soft: #f5f5f7;
	--iht-shadow: 0 0 90px rgba(0, 0, 0, 0.1);
	--iht-font: "Aptos", "Segoe UI", Arial, sans-serif;
	--iht-font-title: "Open Sans", "Segoe UI", Arial, sans-serif;

	--iht-pad-x: 60px;
	--iht-top-h: 109px;
	--iht-logo-w: 160px;
	--iht-nav-gap: 32px;
	--iht-nav-size: 16px;
	--iht-group-gap: 32px;
	--iht-actions-gap: 10px;
	--iht-btn-pad-x: 24px;
	--iht-btn-size: 16px;
	--iht-bar-gap: 60px;
	/* 60px: lower than the 71px drawn in Figma, at the team's request. */
	--iht-bar-h: 60px;
	--iht-lift: 0 6px 20px rgba(17, 24, 39, 0.06);

	position: relative;
	z-index: 100;
	width: 100%;
	/* Very light shadow, so the header reads as sitting above the page. */
	box-shadow: var(--iht-lift);
	font-family: var(--iht-font);
	color: var(--iht-ink);
	-webkit-font-smoothing: antialiased;
}

.elementor-widget-iht_header,
.elementor-widget-iht_header > .elementor-widget-container {
	width: 100%;
	align-self: stretch;
}

/* ---------- Base ---------- */

.iht-hdr *,
.iht-hdr *::before,
.iht-hdr *::after {
	box-sizing: border-box;
}

.iht-hdr ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.iht-hdr li {
	margin: 0;
	padding: 0;
}

.iht-hdr a {
	text-decoration: none;
}

.iht-hdr .iht-ico {
	display: block;
	flex: 0 0 auto;
}

.iht-hdr .iht-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.iht-hdr .iht-hdr__inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding-inline: var(--iht-pad-x);
}

/* Visible keyboard focus, everywhere in the header. */
.iht-hdr a:focus-visible,
.iht-hdr button:focus-visible {
	outline: 2px solid var(--iht-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Top row ---------- */

.iht-hdr .iht-hdr__top {
	background: #fff;
}

.iht-hdr .iht-hdr__inner--top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--iht-group-gap);
	min-height: var(--iht-top-h);
}

.iht-hdr .iht-hdr__logo {
	display: block;
	flex: 0 0 auto;
	width: var(--iht-logo-w);
	line-height: 0;
}

.iht-hdr .iht-hdr__logo-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.iht-hdr .iht-hdr__right {
	display: flex;
	align-items: center;
	gap: var(--iht-group-gap);
	min-width: 0;
}

.iht-hdr .iht-hdr__pages-list {
	display: flex;
	align-items: center;
	gap: var(--iht-nav-gap);
}

.iht-hdr .iht-hdr__page {
	display: block;
	font-family: var(--iht-font);
	font-size: var(--iht-nav-size);
	font-weight: 400;
	line-height: 24px;
	color: var(--iht-ink);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.iht-hdr .iht-hdr__page:hover,
.iht-hdr .iht-hdr__page[aria-current="page"] {
	color: var(--iht-blue);
}

.iht-hdr .iht-hdr__actions {
	display: flex;
	align-items: center;
	gap: var(--iht-actions-gap);
	flex: 0 0 auto;
}

/* Round icon slots: search, basket, menu toggle. 43 x 43 as drawn. */
.iht-hdr .iht-hdr__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	color: var(--iht-grey);
}

/* The search shortcode brings its own button; keep its behaviour, match the slot. */
.iht-hdr .iht-hdr__search .iht-search-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

/* The basket shortcode: WooCommerce replaces div.pmc-cesta-wrap on every
   add-to-cart, so only its look is changed here, never its markup. */
.iht-hdr .iht-hdr__cart .pmc-cesta-wrap {
	display: contents;
}

.iht-hdr .iht-hdr__cart .pmc-cesta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 43px;
	border-radius: 50%;
	color: var(--iht-grey);
	transition: color 0.15s ease;
}

.iht-hdr .iht-hdr__cart .pmc-cesta:hover {
	color: var(--iht-blue);
}

.iht-hdr .iht-hdr__cart .pmc-cesta__icone {
	display: block;
	line-height: 0;
}

/* Count badge: 17 x 17, top right of the icon (Figma node 3948:8305). */
.iht-hdr .iht-hdr__cart .pmc-cesta__conta {
	position: absolute;
	top: 3px;
	left: 23px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 8.5px;
	background: var(--iht-blue);
	color: #fff;
	font-family: var(--iht-font);
	font-size: 12px;
	font-weight: 600;
	line-height: 17px;
	letter-spacing: -0.48px;
	text-align: center;
}

/* Menu toggle: hidden on desktop. The theme styles every <button>, so all
   four states are reset together, with enough weight to win. */
.iht-hdr .iht-hdr__toggle {
	display: none;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--iht-grey);
	cursor: pointer;
	box-shadow: none;
}

.iht-hdr .iht-hdr__toggle:hover,
.iht-hdr .iht-hdr__toggle:focus,
.iht-hdr .iht-hdr__toggle:active {
	background: transparent;
	color: var(--iht-blue);
	box-shadow: none;
}

.iht-hdr .iht-hdr__toggle .iht-ico--close {
	display: none;
}

.iht-hdr.is-drawer-open .iht-hdr__toggle .iht-ico--menu {
	display: none;
}

.iht-hdr.is-drawer-open .iht-hdr__toggle .iht-ico--close {
	display: block;
}

/* ---------- Buttons ---------- */

.iht-hdr .iht-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 43px;
	padding: 0 var(--iht-btn-pad-x);
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--iht-font);
	font-size: var(--iht-btn-size);
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.iht-hdr .iht-btn--solid {
	background: var(--iht-blue);
	border-color: var(--iht-blue);
	color: #fff;
}

.iht-hdr .iht-btn--solid:hover,
.iht-hdr .iht-btn--solid:focus-visible {
	background: #2f3796;
	border-color: #2f3796;
	color: #fff;
}

.iht-hdr .iht-btn--outline {
	background: transparent;
	border-color: var(--iht-grey);
	color: var(--iht-grey);
}

.iht-hdr .iht-btn--outline:hover,
.iht-hdr .iht-btn--outline:focus-visible {
	border-color: var(--iht-blue);
	color: var(--iht-blue);
}

/* ---------- Course bar ---------- */

.iht-hdr .iht-hdr__bar {
	position: relative;
	background: var(--iht-blue);
}

/* The list is exactly as wide as its items and is the reference for the panels:
   a panel never leaves the span from the first item to the last one. */
.iht-hdr .iht-hdr__cats {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: var(--iht-bar-gap);
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
}

.iht-hdr .iht-cat {
	position: static;
	display: flex;
	align-items: center;
}

/* The link fills the bar height, so moving the pointer down goes straight
   from the link into the panel without leaving the item. */
.iht-hdr .iht-cat__link {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--iht-bar-h);
	font-family: var(--iht-font);
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	color: #fff;
	white-space: nowrap;
}

.iht-hdr .iht-cat__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--iht-cat, #fff);
	scale: 0 1;
	transition: scale 0.2s ease;
}

.iht-hdr .iht-cat__link:hover,
.iht-hdr .iht-cat__link:focus-visible {
	color: #fff;
}

.iht-hdr .iht-cat__link:hover::after,
.iht-hdr .iht-cat__link[aria-current="page"]::after,
.iht-hdr .iht-cat.is-open > .iht-cat__link::after {
	scale: 1 1;
}

/* Disclosure button: invisible until keyboard focus reaches it. */
.iht-hdr .iht-cat__toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	background: transparent;
	color: #fff;
	box-shadow: none;
	cursor: pointer;
}

.iht-hdr .iht-cat__toggle:focus-visible {
	position: static;
	width: 28px;
	height: 28px;
	margin-left: 6px;
	overflow: visible;
	clip: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.iht-hdr .iht-cat__toggle:hover,
.iht-hdr .iht-cat__toggle:focus,
.iht-hdr .iht-cat__toggle:active {
	color: #fff;
	box-shadow: none;
}

.iht-hdr .iht-cat.is-open > .iht-cat__toggle .iht-ico--chevron {
	rotate: 180deg;
}

/* ---------- Mega menu panel (Figma 3815:892) ---------- */

/* Flush with the left edge of the menu, or with the right one (--end).
   Pure CSS: no measuring, so every browser lands in the same place. */
.iht-hdr .iht-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: none;
	width: min(772px, calc(100vw - 32px));
	overflow: hidden;
	background: #fff;
	border-radius: 0 0 20px 20px;
	box-shadow: var(--iht-shadow);
	color: var(--iht-ink);
}

.iht-hdr .iht-panel--end {
	left: auto;
	right: 0;
}

/* Without JavaScript, hover and keyboard focus still open the panel. */
.iht-hdr:not(.iht-hdr--js) .iht-cat--panel:hover > .iht-panel,
.iht-hdr:not(.iht-hdr--js) .iht-cat--panel:focus-within > .iht-panel {
	display: block;
}

/* With JavaScript, the script decides. */
.iht-hdr.iht-hdr--js .iht-cat.is-open > .iht-panel {
	display: block;
	animation: iht-fade-in 0.16s ease-out;
}

.iht-hdr .iht-panel__deco {
	position: absolute;
	top: 47px;
	left: 508px;
	width: 539px;
	height: 539px;
	background: url("deco.svg") no-repeat 0 0 / 539px 539px;
	pointer-events: none;
}

.iht-hdr .iht-panel__body {
	position: relative;
	z-index: 1;
	padding: 37px 40px;
}

.iht-hdr .iht-panel__head {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 30px;
}

.iht-hdr .iht-panel__title {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex: 0 0 auto;
	font-family: var(--iht-font-title);
	font-size: 18px;
	font-weight: 600;
	/* 21px, the height of the star: the Figma row is 21px tall, not 23.4px. */
	line-height: 21px;
	color: var(--iht-ink);
}

.iht-hdr .iht-panel__title:hover {
	color: var(--iht-blue);
}

.iht-hdr .iht-panel__title .iht-ico--star,
.iht-hdr .iht-card .iht-ico--star {
	color: var(--iht-cat, var(--iht-blue));
}

.iht-hdr .iht-panel__rule {
	flex: 1 1 auto;
	max-width: 292px;
	height: 1px;
	background: var(--iht-rule);
}

.iht-hdr .iht-panel__links {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--iht-rows, 5), auto);
	grid-auto-columns: max-content;
	column-gap: 40px;
	row-gap: 30px;
	max-width: 440px;
}

.iht-hdr .iht-panel__links a,
.iht-hdr .iht-panel__links span {
	display: block;
	font-family: var(--iht-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--iht-ink-75);
	white-space: nowrap;
	transition: color 0.15s ease;
}

.iht-hdr .iht-panel__links a:hover,
.iht-hdr .iht-panel__links a[aria-current="page"] {
	color: var(--iht-blue);
}

.iht-hdr .iht-panel__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}

/* ---------- Mobile drawer ---------- */

.iht-hdr .iht-drawer {
	position: fixed;
	top: var(--iht-drawer-top, 89px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 20;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--iht-bg-soft);
	-webkit-overflow-scrolling: touch;
}

.iht-hdr .iht-drawer[hidden] {
	display: none;
}

/* Full width, with the same side padding as the header, so the cards line up
   with the logo and the icons. The bottom padding lets the last card scroll
   clear of floating widgets (the chat bubble sits at the bottom right). */
.iht-hdr .iht-drawer__inner {
	width: 100%;
	margin: 0;
	padding: 25px var(--iht-pad-x) 120px;
}

.iht-hdr .iht-drawer__view[hidden] {
	display: none;
}

.iht-hdr .iht-drawer__view.is-entering {
	animation: iht-fade-in 0.18s ease-out;
}

.iht-hdr .iht-cards {
	display: flex;
	flex-direction: column;
}

.iht-hdr .iht-cards--pages {
	gap: 13px;
}

.iht-hdr .iht-cards--courses {
	gap: 10px;
	margin-top: 10px;
}

/* Every category card is 75px tall in Figma (3983:6643), with or without a panel. */
.iht-hdr .iht-cards--courses .iht-card {
	min-height: 75px;
}

/* Card: 327 x 72 at 402px wide, radius 20, soft shadow (Figma 3983:6787). */
.iht-hdr .iht-card {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 72px;
	padding: 0 clamp(20px, 6.7vw, 27px);
	margin: 0;
	border: 0;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--iht-shadow);
	font-family: var(--iht-font-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 23.4px;
	color: var(--iht-ink);
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.iht-hdr button.iht-card:hover,
.iht-hdr button.iht-card:focus,
.iht-hdr button.iht-card:active,
.iht-hdr a.iht-card:hover,
.iht-hdr a.iht-card:focus {
	background: #fff;
	color: var(--iht-ink);
	box-shadow: var(--iht-shadow);
}

.iht-hdr .iht-card__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Only the arrow that belongs to the card itself. A button inside an open
   accordion is also inside a card, and its arrow must follow the button. */
.iht-hdr .iht-card > .iht-ico--arrow {
	color: #4c4d4e;
}

/* Arrows in buttons always take the button's text colour: white on blue, grey on outline. */
.iht-hdr .iht-btn .iht-ico {
	color: currentColor;
}

.iht-hdr .iht-card[aria-current="page"] .iht-card__text {
	color: var(--iht-blue);
}

/* "Back to menu" sits on the page colour, as drawn. */
.iht-hdr .iht-card.iht-card--back,
.iht-hdr .iht-card.iht-card--back:hover,
.iht-hdr .iht-card.iht-card--back:focus,
.iht-hdr .iht-card.iht-card--back:active {
	background: var(--iht-bg-soft);
}

.iht-hdr .iht-card--back .iht-ico--chevron {
	rotate: 90deg;
	color: #3f3f46;
}

/* Accordion card: the label is a link to the category page, the chevron
   is its own button. Both stay reachable. */
.iht-hdr .iht-card.iht-card--acc {
	display: block;
	padding: 0;
	cursor: default;
}

.iht-hdr .iht-card__row {
	display: flex;
	align-items: center;
	min-height: 75px;
}

.iht-hdr .iht-card__link {
	display: flex;
	align-items: center;
	gap: 13px;
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	padding-left: clamp(20px, 6.7vw, 27px);
	color: var(--iht-ink);
}

.iht-hdr .iht-card__link:hover {
	color: var(--iht-blue);
}

.iht-hdr .iht-card__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 64px;
	align-self: stretch;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0 20px 20px 0;
	background: transparent;
	color: #3f3f46;
	box-shadow: none;
	cursor: pointer;
}

.iht-hdr .iht-card__toggle:hover,
.iht-hdr .iht-card__toggle:focus,
.iht-hdr .iht-card__toggle:active {
	background: transparent;
	color: var(--iht-blue);
	box-shadow: none;
}

.iht-hdr .iht-card__toggle .iht-ico--chevron {
	transition: rotate 0.2s ease;
}

.iht-hdr .iht-card__toggle[aria-expanded="true"] .iht-ico--chevron {
	rotate: 180deg;
}

.iht-hdr .iht-card__body {
	padding: 0 clamp(20px, 6.7vw, 27px) 27px;
}

.iht-hdr .iht-card__body[hidden] {
	display: none;
}

.iht-hdr .iht-card__links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}

.iht-hdr .iht-card__links a,
.iht-hdr .iht-card__links span {
	display: block;
	font-family: var(--iht-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--iht-ink-75);
}

.iht-hdr .iht-card__links a:hover,
.iht-hdr .iht-card__links a[aria-current="page"] {
	color: var(--iht-blue);
}

.iht-hdr .iht-card__buttons {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 27px;
}

.iht-hdr .iht-card__buttons .iht-btn {
	--iht-btn-pad-x: 22px;
}

/* O CTA abre o menu, não o fecha: fica acima dos cartões, como uma pílula
   normal. Esticado a 100% ele lia como mais um cartão da lista, só que azul. */
.iht-hdr .iht-drawer__cta {
	/* Flex e não bloco: com o botão como inline-block, a caixa de linha punha
	   8px por cima dele, e a pílula descolava do topo do painel. */
	display: flex;
	margin: 0 0 22px;
}

.iht-hdr .iht-drawer__cta .iht-btn {
	width: auto;
}

/* Body scroll lock while the drawer is open. The gutter stays reserved, so on
   browsers with classic scrollbars the page does not widen by the scrollbar's
   width and the drawer keeps lining up with the header. */
html.iht-scroll-lock,
html.iht-scroll-lock body {
	overflow: hidden;
}

html.iht-scroll-lock {
	scrollbar-gutter: stable;
}

@keyframes iht-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ==========================================================
   Responsive blocks. Keep them last.
   ========================================================== */

/* Compact desktop. */
@media (max-width: 1399px) {
	.iht-hdr {
		--iht-pad-x: 32px;
		--iht-logo-w: 140px;
		--iht-nav-gap: 20px;
		--iht-nav-size: 15px;
		--iht-group-gap: 24px;
		--iht-actions-gap: 8px;
		--iht-btn-pad-x: 18px;
		--iht-btn-size: 15px;
		--iht-bar-gap: 36px;
	}
}

/* Hamburger and drawer. 20px side padding on tablet, at the team's request. */
@media (max-width: 1279px) {
	.iht-hdr {
		--iht-top-h: 89px;
		--iht-pad-x: 20px;
		--iht-btn-size: 16px;
		--iht-btn-pad-x: 22px;
		box-shadow: none;
	}

	/* Border and shadow live on the top row here, above the drawer (z-index 20):
	   on the root they would be painted under the open drawer and disappear. */
	.iht-hdr .iht-hdr__top {
		position: relative;
		z-index: 30;
		border-bottom: 1px solid #ebebeb;
		box-shadow: var(--iht-lift);
	}

	/* Tablet: 18px under the header (25 felt too far, 12 too tight). */
	.iht-hdr .iht-drawer__inner {
		padding-top: 18px;
	}

	.iht-hdr .iht-hdr__pages,
	.iht-hdr .iht-hdr__bar,
	.iht-hdr .iht-hdr__job {
		display: none;
	}

	.iht-hdr .iht-hdr__toggle {
		display: flex;
	}
}

/* Phone. 15px, as asked by the team: a wider header and drawer.
   (The page sections use 20px on phones.) */
@media (max-width: 767px) {
	.iht-hdr {
		/* 72px: lower than the 89px drawn in Figma, at the team's request. */
		--iht-top-h: 72px;
		--iht-pad-x: 15px;
		--iht-logo-w: 125px;
		--iht-group-gap: 12px;
		--iht-actions-gap: 10px;
	}

	.iht-hdr .iht-hdr__course {
		display: none;
	}

	/* Phone keeps the Figma gap under the header (25px). */
	.iht-hdr .iht-drawer__inner {
		padding-top: 25px;
	}
}

/* Very narrow phones: the three icons still fit next to the logo. */
@media (max-width: 359px) {
	.iht-hdr {
		--iht-logo-w: 112px;
		--iht-actions-gap: 4px;
	}
}

/* The drawer only exists below the desktop breakpoint. */
@media (min-width: 1280px) {
	.iht-hdr .iht-drawer {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iht-hdr *,
	.iht-hdr *::before,
	.iht-hdr *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------ a lupa

   O plugin da busca desenha o ícone com um PNG de 21x21 como máscara. Num ecrã
   Retina esses 21 pixels são esticados para 42, e a lupa aparecia esfumada ao
   lado do carrinho, que é SVG. A máscara passa a ser vetorial — a cor continua
   a vir do plugin, porque quem pinta é o `background-color` por baixo dela.

   O valor chega por `--iht-mask-url` num atributo `style`, que nenhuma folha
   consegue vencer; por isso o que se troca é a `mask-image` em si. */
.iht-hdr .iht-hdr__search .iht-search-icon-mask {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.6' cy='8.6' r='6.3'/%3E%3Cpath d='M13.2 13.2 18.6 18.6'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8.6' cy='8.6' r='6.3'/%3E%3Cpath d='M13.2 13.2 18.6 18.6'/%3E%3C/g%3E%3C/svg%3E");
}
