/*
 * Site header — Horizonte do Açaí
 *
 * Three stacked bars: announcement / main (logo · search · account · cart) /
 * navigation. Scoped under `.hda-header-*` so it can't touch page content.
 * Colours come from the Elementor Global Colors kit.
 */

:root {
	--hda-h-deep: var(--e-global-color-6597c5e, #261559);
	--hda-h-purple: var(--e-global-color-e02c158, #471ea7);
	--hda-h-green: var(--e-global-color-ac09bde, #1db954);
	--hda-h-ink: #2c2640;
	--hda-h-ink-soft: #6b6580;
	--hda-h-line: rgba(60, 40, 100, 0.1);
	--hda-h-radius: 8px;
	--hda-h-font: var(--e-global-typography-text-font-family, "Roboto"), sans-serif;
}

/* ---------- Bar 1: announcement ---------- */

.hda-topbar {
	background: var(--hda-h-deep);
	color: #fff;
}

.hda-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 46px;
	font-family: var(--hda-h-font);
	font-size: 13px;
	line-height: 1.4;
}

.hda-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #fff;
}

.hda-topbar__item .hda-icon {
	flex-shrink: 0;
	color: var(--hda-h-green);
}

/* ---------- Bar 2: logo · search · account · cart ---------- */

.hda-headbar {
	background: #fff;
}

.hda-search {
	width: 100%;
	max-width: 620px;
}

.hda-search__form {
	position: relative;
	display: flex;
	align-items: center;
}

.hda-search__field {
	width: 100%;
	height: 52px;
	padding: 0 54px 0 20px;
	border: 1px solid var(--hda-h-line);
	border-radius: var(--hda-h-radius);
	background: #fff;
	font-family: var(--hda-h-font);
	font-size: 15px;
	color: var(--hda-h-ink);
}

.hda-search__field::placeholder {
	color: #9c98a6;
}

.hda-search__field:focus {
	border-color: var(--hda-h-purple);
	outline: none;
	box-shadow: 0 0 0 3px rgba(71, 30, 167, 0.16);
}

.hda-search__submit {
	position: absolute;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 40px keeps the tap target above the 24px WCAG 2.2 minimum with room to
	   spare, without visually crowding the field. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--hda-h-deep);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.hda-search__submit:hover {
	background: #f1ecfb;
}

.hda-search__submit:focus-visible {
	outline: 2px solid var(--hda-h-purple);
	outline-offset: 1px;
}

/* Account link */

.hda-account {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--hda-h-ink);
	font-family: var(--hda-h-font);
	white-space: nowrap;
}

.hda-account__icon {
	display: flex;
	color: var(--hda-h-deep);
}

.hda-account__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.hda-account__text strong {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--hda-h-ink);
}

.hda-account__text small {
	font-size: 12px;
	color: var(--hda-h-ink-soft);
}

.hda-account:hover .hda-account__text strong {
	color: var(--hda-h-purple);
}

.hda-account:focus-visible {
	outline: 2px solid var(--hda-h-purple);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Cart button — the Elementor menu-cart widget restyled.
 *
 * The widget is kept (rather than hand-rolled) so the AJAX fragments and the
 * side-cart panel keep working. Only its skin changes here.
 *
 * Its icon <span> renders empty on this install — Elementor's icon pipeline
 * doesn't emit the glyph for widgets created through the API — so the cart
 * glyph is painted as an SVG mask on that span instead. */

.hda-col-cart > .elementor-widget-wrap {
	justify-content: flex-end;
}

.hda-cart .elementor-menu-cart__toggle_button {
	display: inline-flex !important;
	align-items: center;
	gap: 11px;
	min-height: 52px;
	padding: 0 22px !important;
	border: none !important;
	border-radius: var(--hda-h-radius) !important;
	background: var(--hda-h-purple) !important;
	color: #fff !important;
	font-family: var(--hda-h-font);
	font-size: 15.5px;
	font-weight: 700;
	box-shadow: none !important;
	transition: background-color 0.18s ease;
}

.hda-cart .elementor-menu-cart__toggle_button:hover {
	background: var(--hda-h-deep) !important;
}

.hda-cart .elementor-menu-cart__toggle_button:focus-visible {
	outline: 3px solid rgba(71, 30, 167, 0.45);
	outline-offset: 2px;
}

.hda-cart .elementor-menu-cart__toggle_button .elementor-button-icon {
	position: static;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.hda-cart .elementor-menu-cart__toggle_button .elementor-button-icon::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3h2.7l2.4 11.2a1.8 1.8 0 0 0 1.8 1.4h8.4a1.8 1.8 0 0 0 1.8-1.4l1.6-7.3H6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2.5 3h2.7l2.4 11.2a1.8 1.8 0 0 0 1.8 1.4h8.4a1.8 1.8 0 0 0 1.8-1.4l1.6-7.3H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/*
 * The real markup is `.elementor-button-icon > i.eicon-cart-medium` — nested
 * one level deeper than assumed here originally, so this rule (with a direct
 * `>` combinator) never matched and the icon-font glyph rendered as an empty
 * box whenever eicon's font wasn't fully loaded. Descendant selector fixes
 * that regardless of nesting.
 */
.hda-cart .elementor-menu-cart__toggle_button i,
.hda-cart .elementor-menu-cart__toggle_button svg {
	display: none !important;
}

.hda-cart .elementor-button-text {
	color: #fff !important;
	font-variant-numeric: tabular-nums;
}

/* Count bubble pinned to the button's top-right corner */
.hda-cart .elementor-menu-cart__toggle {
	position: relative;
	display: inline-flex;
}

.hda-cart .elementor-button-icon-qty {
	position: absolute;
	top: -7px;
	right: -7px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border-radius: 999px;
	background: #e5484d !important;
	color: #fff !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Bar 3: navigation ---------- */

.hda-navbar {
	background: var(--hda-h-deep);
}

.hda-navbar .elementor-nav-menu .elementor-item {
	color: #fff !important;
	fill: #fff !important;
	font-family: var(--hda-h-font);
	font-weight: 500;
}

.hda-navbar .elementor-nav-menu .elementor-item:hover,
.hda-navbar .elementor-nav-menu .elementor-item:focus,
.hda-navbar .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--hda-h-green) !important;
	fill: var(--hda-h-green) !important;
}

.hda-navbar .elementor-nav-menu--dropdown .elementor-item {
	color: var(--hda-h-ink) !important;
}

.hda-col-nav > .elementor-widget-wrap {
	justify-content: flex-start;
}

.hda-col-cta > .elementor-widget-wrap {
	justify-content: flex-end;
}

.hda-navbar .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 24px;
	border-radius: var(--hda-h-radius) !important;
	background-color: #5a2ecc !important;
	border: none !important;
	color: #fff !important;
	font-family: var(--hda-h-font);
	font-size: 14.5px;
	font-weight: 600;
}

.hda-navbar .elementor-widget-button .elementor-button:hover {
	background-color: var(--hda-h-purple) !important;
}

/* Same empty-icon-span situation as the cart button */
.hda-navbar .elementor-widget-button .elementor-button-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.hda-navbar .elementor-widget-button .elementor-button-icon::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22.3l5.3-1.4A10 10 0 1 0 12 2Zm0 18.2a8.1 8.1 0 0 1-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2Z'/%3E%3Cpath d='M16.9 14.3c-.3-.1-1.6-.8-1.8-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.5.1-1.4-.6-2.5-1.6-3.2-2.9-.1-.3 0-.4.1-.6l.4-.5c.1-.2.1-.3.2-.5v-.4c0-.1-.6-1.4-.8-1.9-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.7.7-1 1.6-.9 2.5.2 1.1.7 2.1 1.4 3 1.2 1.8 2.9 3.1 4.9 3.8.5.2 1 .3 1.6.3.5 0 1.1-.1 1.6-.4.5-.3.8-.8.9-1.4.1-.2.1-.5 0-.7l-.6-.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22.3l5.3-1.4A10 10 0 1 0 12 2Zm0 18.2a8.1 8.1 0 0 1-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3A8.2 8.2 0 1 1 12 20.2Z'/%3E%3Cpath d='M16.9 14.3c-.3-.1-1.6-.8-1.8-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.8 1-.2.2-.3.2-.5.1-1.4-.6-2.5-1.6-3.2-2.9-.1-.3 0-.4.1-.6l.4-.5c.1-.2.1-.3.2-.5v-.4c0-.1-.6-1.4-.8-1.9-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.7.7-1 1.6-.9 2.5.2 1.1.7 2.1 1.4 3 1.2 1.8 2.9 3.1 4.9 3.8.5.2 1 .3 1.6.3.5 0 1.1-.1 1.6-.4.5-.3.8-.8.9-1.4.1-.2.1-.5 0-.7l-.6-.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hda-navbar .elementor-widget-button .elementor-button-icon > i,
.hda-navbar .elementor-widget-button .elementor-button-icon > svg {
	display: none;
}

/* Menu spacing / logo sizing */
.hda-navbar .elementor-nav-menu--main .elementor-item {
	padding: 12px 22px;
	font-size: 16px;
}

.hda-navbar .elementor-nav-menu--main > li:first-child .elementor-item {
	padding-left: 0;
}

.hda-col-logo img {
	max-height: 62px;
	width: auto;
}

.hda-col-account > .elementor-widget-wrap {
	justify-content: flex-end;
	padding-right: 18px;
}

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

@media (max-width: 1024px) {
	.hda-topbar__inner {
		gap: 6px 26px;
		font-size: 12px;
	}

	.hda-search__field {
		height: 48px;
	}

	/* ---------- Mobile menu ----------
	   The nav widget is set to "dropdown from tablet", so from here down the
	   burger replaces the inline links. Elementor's defaults give the toggle a
	   dark icon on a translucent black chip — invisible against the purple bar —
	   and leave the panel unstyled, so it renders as a bare white box the width
	   of whatever column it happens to sit in. Both are restyled below.

	   The panel stays in the normal flow, exactly where Elementor puts it. An
	   earlier version lifted it out with position:absolute to overlay the page,
	   and the menu stopped opening — an absolutely positioned panel is at the
	   mercy of any ancestor with overflow:hidden, and there is no way to style
	   around that from here. Pushing the content down is the boring option and
	   it works, so the open/close animation stays entirely Elementor's. */

	.hda-navbar .elementor-menu-toggle {
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.14);
		color: #fff;
		transition: background-color 0.15s ease;
	}

	.hda-navbar .elementor-menu-toggle:hover,
	.hda-navbar .elementor-menu-toggle.elementor-active {
		background-color: rgba(255, 255, 255, 0.24);
	}

	.hda-navbar .elementor-menu-toggle:focus-visible {
		outline: none;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
	}

	.hda-navbar .elementor-menu-toggle i,
	.hda-navbar .elementor-menu-toggle svg {
		font-size: 24px;
		color: #fff;
		fill: #fff;
	}

	.hda-navbar .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		width: 100%;
		margin-top: 10px;
		padding: 6px 0;
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 14px 34px rgba(20, 12, 45, 0.22);
	}

	.hda-navbar .elementor-nav-menu--dropdown .elementor-nav-menu {
		padding: 0;
	}

	.hda-navbar .elementor-nav-menu--dropdown .elementor-item {
		display: flex;
		align-items: center;
		/* The horizontal padding is what the panel was missing: without it the
		   labels sat flush against the white edge. */
		padding: 15px 22px;
		min-height: 50px;
		border-bottom: 1px solid var(--hda-h-line);
		font-family: var(--hda-h-font);
		font-size: 16px;
		font-weight: 600;
		color: var(--hda-h-ink) !important;
		fill: var(--hda-h-ink) !important;
		line-height: 1.3;
	}

	.hda-navbar .elementor-nav-menu--dropdown li:last-child .elementor-item {
		border-bottom: none;
	}

	.hda-navbar .elementor-nav-menu--dropdown .elementor-item:hover,
	.hda-navbar .elementor-nav-menu--dropdown .elementor-item:focus,
	.hda-navbar .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	.hda-navbar .elementor-nav-menu--dropdown .elementor-item.highlighted {
		background-color: #f1ecfb;
		color: var(--hda-h-purple) !important;
		fill: var(--hda-h-purple) !important;
	}

	.hda-navbar .elementor-nav-menu--dropdown .elementor-item:focus-visible {
		outline: none;
		box-shadow: inset 0 0 0 3px rgba(71, 30, 167, 0.35);
	}

	/* Sub-items stay readable but visibly subordinate. */
	.hda-navbar .elementor-nav-menu--dropdown .elementor-sub-item {
		padding-left: 38px;
		font-size: 15px;
		font-weight: 500;
		color: var(--hda-h-ink-soft) !important;
	}
}

@media (max-width: 767px) {
	/* Only the delivery promise survives on a phone — three items wrap into a
	   tall block that pushes the logo below the fold. */
	.hda-topbar__item:not(:first-child) {
		display: none;
	}

	.hda-topbar__inner {
		justify-content: center;
		font-size: 12px;
	}

	/*
	 * Phone layout for the main bar: logo and cart share the first row, the
	 * search field spans a full row underneath, and the account link collapses
	 * to its icon. Elementor stacks columns at this width by default, which
	 * would put the logo, search, account and cart on four separate rows and
	 * push everything below the fold — hence the explicit grid.
	 */
	.hda-headbar > .elementor-container {
		display: grid !important;
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "logo account cart" "search search search";
		align-items: center;
		gap: 12px 10px;
	}

	.hda-headbar > .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: none;
	}

	.hda-col-logo { grid-area: logo; }
	.hda-col-search { grid-area: search; }
	.hda-col-account { grid-area: account; }
	.hda-col-cart { grid-area: cart; }

	.hda-col-account > .elementor-widget-wrap {
		padding-right: 0;
		justify-content: center;
	}

	.hda-account__text {
		display: none;
	}

	.hda-col-logo img {
		max-height: 46px;
	}

	.hda-search__field {
		height: 46px;
		font-size: 16px; /* ≥16px stops iOS auto-zooming on focus */
	}

	.hda-cart .elementor-menu-cart__toggle_button {
		min-height: 46px;
		padding: 0 14px !important;
		font-size: 14px;
	}

	/* Nav row: horizontal scroll beats wrapping into a tall stack */
	.hda-navbar > .elementor-container {
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
	}

	/* The burger owns the whole row: it sits at the start instead of floating in
	   the middle of a shrink-wrapped column, and the dropdown it opens inherits
	   that full width. The "Fale conosco" button steps aside here — at this size
	   it was being pushed off the right edge of the screen, and the same action
	   is already offered by the WhatsApp line in the top bar and by the floating
	   button that sits over the page. */
	.hda-navbar .hda-col-nav {
		flex: 1 1 100%;
		min-width: 0;
	}

	.hda-navbar .hda-col-cta {
		display: none;
	}

	.hda-navbar .elementor-nav-menu--main {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hda-navbar .elementor-nav-menu--main::-webkit-scrollbar {
		display: none;
	}

	.hda-navbar .elementor-nav-menu--main .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	.hda-navbar .elementor-nav-menu--main .elementor-item {
		white-space: nowrap;
		padding: 10px 14px;
		font-size: 15px;
	}

	.hda-col-cta {
		flex: 0 0 auto;
	}

	.hda-navbar .elementor-widget-button .elementor-button {
		min-height: 42px;
		padding: 0 14px;
		font-size: 13.5px;
	}
}

@media (max-width: 480px) {
	/* Cart button drops its subtotal label; the count bubble still conveys state */
	.hda-cart .elementor-button-text {
		display: none;
	}

	.hda-cart .elementor-menu-cart__toggle_button {
		padding: 0 12px !important;
	}

	.hda-col-logo img {
		max-height: 40px;
	}

	.hda-navbar .elementor-widget-button .elementor-button span:not(.elementor-button-icon) {
		display: none;
	}

	.hda-navbar .elementor-widget-button .elementor-button {
		padding: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hda-search__submit,
	.hda-cart .elementor-menu-cart__toggle_button,
	.hda-navbar .elementor-widget-button .elementor-button,
	.hda-navbar .elementor-menu-toggle {
		transition: none;
	}
}