/* ==========================================================================
   Cabeçalho: faixa do logo/busca/conta e barra de menu.
   Medidas reproduzem o layout original (Oxygen, template "Header e Footer").
   ========================================================================== */

/* Faixa superior ---------------------------------------------------------- */

.site-header__top {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
	background-color: var(--gv-white);
	background-image: var(--gv-rings);
	background-size: cover;
	background-blend-mode: multiply;
}

.site-header__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: var(--gv-width-wide);
}

/* Entre 768 e 1360px o conteúdo encostava nas laterais (o contador do
   carrinho passava da tela): respiro lateral fixo. */
@media (min-width: 768px) and (max-width: 1360px) {
	.site-header__container {
		padding-inline: var(--gv-space-5);
	}
}

.site-header__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 56px;
}

.site-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 25%;
}

.site-logo__image {
	width: 100%;
	margin: 7px 0 -89px;
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-top: 10px;
}

.site-header__finders {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 69%;
}

.site-header__search,
.site-header__brands {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 45%;
}

.site-header__home {
	display: flex;
	flex-shrink: 0;
	color: #020202;
	transition: color 0.3s;
}

.site-header__home .gv-icon {
	width: 47px;
	height: 47px;
	margin-right: 12px;
}

.site-header__home:hover {
	color: var(--gv-accent);
}

.site-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 35%;
}

/* Campo de busca ---------------------------------------------------------- */

.search-field,
.brand-select {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	font-family: var(--gv-font-field);
	background: var(--gv-white);
	border: 2px solid var(--gv-field-border);
	border-radius: 25px;
	transition: border-color 0.2s;
}

.search-field:focus-within,
.brand-select:focus-within {
	border-color: var(--gv-button-dark);
}

.search-field__icon {
	position: absolute;
	left: 15px;
	z-index: 2;
	width: 20px;
	height: 20px;
	color: var(--gv-field-icon);
	pointer-events: none;
}

.search-field__input {
	width: 100%;
	padding: 15px 107px 15px 50px;
	font-family: var(--gv-font-field);
	font-size: 16px;
	line-height: 1.15;
	color: var(--gv-field-text);
	background: transparent;
	border: 0;
	border-radius: 25px;
	outline: none;
	appearance: none;
}

.search-field__input::placeholder {
	color: var(--gv-field-placeholder);
}

.search-field__input::-webkit-search-cancel-button {
	display: none;
}

.search-field__button {
	position: absolute;
	right: 8px;
	padding: 8px 16px;
	font-family: var(--gv-font-field);
	font-size: 14px;
	font-weight: 500;
	color: var(--gv-white);
	background: var(--gv-button-dark);
	border-radius: 20px;
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	transition: all 0.3s ease;
}

.search-field.has-term .search-field__button,
.search-field__button:focus-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.search-field__button:hover {
	background: #191919;
	transform: translateX(0) scale(1.05);
}

/* Seletor de marcas ------------------------------------------------------- */

.brand-select:hover {
	transform: scale(1.02);
}

.brand-select__input {
	width: 100%;
	padding: 15px 50px 15px 20px;
	font-family: var(--gv-font-field);
	font-size: 16px;
	line-height: 1.15;
	color: var(--gv-field-text);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 25px;
	outline: none;
	appearance: none;
}

.brand-select__icon {
	position: absolute;
	right: 15px;
	z-index: 2;
	width: 20px;
	height: 20px;
	color: var(--gv-field-icon);
	pointer-events: none;
	transition: transform 0.3s ease;
}

.brand-select:focus-within .brand-select__icon {
	color: #007cba;
	transform: rotate(180deg);
}

/* Conta ------------------------------------------------------------------- */

.header-account {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	max-width: 55%;
	margin-right: 38px;
}

.header-account__icon {
	width: 26px;
	height: 26px;
	margin-right: 5px;
	color: var(--gv-black);
}

.header-account__text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-left: 10px;
	font-family: var(--gv-font-account);
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	color: #1e1e1e;
	white-space: nowrap;
}

.header-account__line + .header-account__line {
	color: var(--gv-black);
}

.header-account__link {
	font-weight: 700;
	color: var(--gv-black);
	text-decoration: underline;
	transition: opacity 0.3s;
}

.header-account__link:hover {
	opacity: 0.4;
}

/* Conta: cliente logado (menu com avatar) */

.header-account--logged {
	position: relative;
	display: inline-flex;
	width: auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.header-account__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border-radius: 50px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-account__toggle:hover {
	opacity: 0.7;
}

.header-account__avatar {
	width: 60px;
	height: 60px;
	object-fit: scale-down;
	border: 1px solid rgb(0 0 0 / 20%);
	border-radius: 50%;
}

.header-account__hello {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #2d3748;
}

.header-account__caret {
	width: 12px;
	height: 12px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-account__menu {
	position: absolute;
	top: calc(100% - 8px);
	right: 0;
	z-index: 1000;
	display: none;
	min-width: 220px;
	padding: 0;
	margin: 0;
	overflow: hidden;
	list-style: none;
	background: var(--gv-white);
	border: 1px solid var(--gv-line-strong);
	border-radius: var(--gv-radius-lg);
}

.header-account--logged:hover .header-account__menu,
.header-account--logged:focus-within .header-account__menu,
.header-account--logged.is-open .header-account__menu {
	display: block;
	animation: gv-slide-down 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-account--logged:hover .header-account__caret,
.header-account--logged.is-open .header-account__caret {
	transform: rotate(180deg);
}

.header-account__menu a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	font-size: 14px;
	font-weight: 500;
	color: #2d3748;
	transition: all 0.2s ease;
}

.header-account__menu li:not(:last-child) a {
	border-bottom: 1px solid rgb(0 0 0 / 6%);
}

.header-account__menu a::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	content: "";
	background: linear-gradient(135deg, #ea6666 0%, #933f3f 100%);
	transform: scaleY(0);
	transition: transform 0.2s ease;
}

.header-account__menu a:hover {
	padding-left: 24px;
	background: linear-gradient(90deg, rgb(234 102 102 / 8%) 0%, rgb(255 255 255 / 0%) 100%);
}

.header-account__menu a:hover::before {
	transform: scaleY(1);
}

.header-account__menu .gv-icon {
	width: 16px;
	height: 16px;
	color: #737373;
}

.header-account__logout a,
.header-account__logout .gv-icon {
	color: #e53e3e;
}

@keyframes gv-slide-down {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Ícones: início, busca, favoritos, carrinho ------------------------------ */

.site-header__icons {
	display: flex;
	align-items: center;
}

.header-icon {
	display: flex;
	color: var(--gv-black);
}

.header-icon--home,
.header-icon--search {
	display: none;
}

.header-icon--home {
	padding-bottom: 8px;
	color: #020202;
	transition: color 0.3s;
}

.header-icon--home .gv-icon {
	width: 33px;
	height: 33px;
}

.header-icon--home:hover {
	color: var(--gv-accent);
}

.header-icon--search {
	padding-bottom: 8px;
}

.header-icon--search .gv-icon {
	width: 23px;
	height: 23px;
}

.header-icon--wishlist {
	margin-right: 34px;
	color: var(--gv-field-text);
}

.header-icon--wishlist .gv-icon {
	width: 25px;
	height: 25px;
}

.header-icon--cart {
	position: relative;
	align-items: flex-start;
	padding: 1px 6px 5px;
}

.header-icon--cart .gv-icon {
	width: 29px;
	height: 29px;
}

.header-icon__count {
	position: absolute;
	top: -6px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	font-family: var(--gv-font-field);
	font-size: 14px;
	line-height: 1;
	color: var(--gv-white);
	background: var(--gv-gray-bar);
	border-radius: 100px;
}

/* Barra de menu (desktop) ------------------------------------------------- */

.site-nav {
	position: relative;
	z-index: 1;
	background: var(--gv-gray-bar);
}

.site-nav__container {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: var(--gv-width-wide);
	margin-inline: auto;
}

.site-nav__open,
.site-nav__close,
.site-nav__backdrop,
.submenu-toggle {
	display: none;
}

.site-nav__panel {
	padding: 4px 0;
}

.primary-menu,
.primary-menu .sub-menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.primary-menu {
	display: flex;
	align-items: center;
}

.primary-menu .menu-item {
	position: relative;
	display: flex;
	align-items: center;
	font-family: var(--gv-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gv-white);
	letter-spacing: 1px;
	text-transform: capitalize;
}

.primary-menu a {
	display: flex;
	flex: 1;
	align-items: center;
	padding: 15px 12px;
	color: var(--gv-white);
	white-space: nowrap;
}

.primary-menu a:hover,
.primary-menu a:focus-visible {
	color: var(--gv-white);
	background-color: var(--gv-gray-hover);
}

.primary-menu .current-menu-item > a {
	color: var(--gv-gray-hover);
	background-color: var(--gv-white);
}

.menu-caret {
	width: 16.8px; /* 1.4em a 12px, como no original */
	height: 16.8px;
	margin-left: 5px;
	transition: transform 0.3s;
}

.menu-item:hover > a > .menu-caret {
	transform: rotate(180deg);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.primary-menu .menu-item:hover > .sub-menu,
.primary-menu .menu-item:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
}

/* Fechado, o submenu sai do fluxo de verdade: invisível, ele ainda ocupava
   espaço à direita e a página rolava na horizontal. */
@media (min-width: 1340px) {
	.primary-menu .sub-menu {
		display: none;
	}

	.primary-menu .menu-item:hover > .sub-menu,
	.primary-menu .menu-item:focus-within > .sub-menu {
		display: flex;
		animation: gv-submenu-in 0.25s ease;
	}

	/* Últimos itens: o 3º nível abre para a esquerda (não passa da tela). */
	.primary-menu > li:nth-last-child(-n+3) .sub-menu .sub-menu {
		right: 100%;
		left: auto;
	}
}

@keyframes gv-submenu-in {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
}

.primary-menu .sub-menu .menu-item {
	font-size: 12px;
}

.primary-menu .sub-menu a {
	background-color: var(--gv-gray-submenu);
}

.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible {
	background-color: var(--gv-gray-hover);
}

/* Painel de busca (mobile) ------------------------------------------------ */

.search-panel {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	max-height: 100vh;
	padding: 30px;
	overflow-y: auto;
	background: var(--gv-white);
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}

.search-panel.is-open {
	transform: none;
}

.search-panel[hidden],
.search-panel__backdrop[hidden] {
	display: none;
}

.search-panel__header {
	position: relative;
	margin-bottom: 10px;
}

.search-panel__title {
	margin: 0;
	font-family: var(--gv-font-alt);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.search-panel__close {
	position: absolute;
	top: -24px;
	right: -21px;
	color: var(--gv-field-text);
}

.search-panel__close .gv-icon {
	width: 28px;
	height: 28px;
}

.search-panel .search-field,
.search-panel .brand-select {
	max-width: 90%;
	margin: 10px auto;
}

.search-panel__or {
	margin: 0;
	font-family: var(--gv-font-alt);
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.search-panel__backdrop {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgb(0 0 0 / 35%);
}

/* Responsivo -------------------------------------------------------------- */

@media (max-width: 1120px) {
	.site-header__top {
		background-position: 0 -27px;
	}

	.site-header__brand {
		margin-bottom: 0;
	}

	.site-logo {
		width: 100%;
	}

	/* No original, os percentuais do logo eram calculados sobre a largura
	   natural da imagem (500px), não sobre a página. */
	.site-logo__image {
		width: min(350px, 70%);
		margin: 0;
	}

	.site-header__bar {
		padding: 0 30px;
	}

	.site-header__finders {
		justify-content: space-between;
	}

	.site-header__search {
		max-width: 55%;
	}

	.site-header__brands {
		max-width: 43%;
	}

	.site-header__actions {
		width: 47%;
	}

	.header-account {
		max-width: 67%;
		margin-right: 0;
	}

	.site-header__icons {
		justify-content: space-between;
		width: 100%;
		max-width: 21%;
	}

	.header-icon--wishlist {
		margin-right: 0;
	}
}

@media (max-width: 991px) {
	.site-header__top {
		background-position: 0 -70px;
	}

	.site-logo__image {
		width: min(270px, 54%);
	}

	.site-header__bar {
		flex-direction: column-reverse;
		justify-content: center;
	}

	.site-header__finders {
		width: 100%;
		margin-top: 23px;
	}

	.site-header__brands {
		padding-left: 10px;
	}

	.site-header__actions {
		justify-content: center;
		width: 100%;
		max-width: 70%;
	}
}

/* Menu vira painel lateral até 1339px: os 8 itens do menu somam ~1.320px e
   não cabem numa linha abaixo disso. */
@media (max-width: 1339px) {
	/* Menu vira painel lateral */
	.site-nav__container {
		justify-content: center;
	}

	.site-nav__open {
		display: inline-flex;
		align-items: center;
		padding: 12px;
		margin: 4px 0;
		font-weight: 700;
		letter-spacing: 1px;
		color: rgb(255 255 255 / 75%);
	}

	.site-nav__open .gv-icon {
		width: 20px;
		height: 20px;
		margin-right: 4px;
		color: var(--gv-white);
	}

	.site-nav__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		display: flex;
		flex-direction: column;
		justify-content: safe center;
		min-width: 300px;
		max-width: 100%;
		padding: 76px 40px 20px; /* topo livre para o botão "Fechar menu" */
		overflow-y: auto;
		visibility: hidden;
		background: var(--gv-gray-bar);
		transform: translateX(100%);
		/* Ao fechar, some só depois de deslizar. */
		transition: transform 0.3s ease, visibility 0s linear 0.3s;
	}

	/* Ao abrir, fica visível na hora (permite mover o foco para dentro). */
	.site-nav.is-open .site-nav__panel {
		visibility: visible;
		transform: none;
		transition: transform 0.3s ease, visibility 0s;
	}

	/* A barra cria um contexto de empilhamento; aberta, ela precisa ficar acima do rodapé. */
	.site-nav.is-open {
		z-index: 1000;
	}

	.site-nav__close {
		position: absolute;
		top: 16px;
		left: 16px;
		display: inline-flex;
		align-items: center;
		padding: 12px;
		font-weight: 700;
		letter-spacing: 1px;
		color: rgb(255 255 255 / 75%);
	}

	.site-nav__close .gv-icon {
		width: 20px;
		height: 20px;
		margin-right: 4px;
		color: var(--gv-white);
	}

	.site-nav.is-open .site-nav__backdrop {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		background: rgb(0 0 0 / 35%);
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
	}

	/* Link e seta na mesma linha (o texto quebra, a seta não); submenu abaixo. */
	.primary-menu .menu-item {
		display: grid;
		grid-template-columns: minmax(0, max-content) auto;
		justify-content: start;
		align-items: start;
		font-size: 14px;
		line-height: 1.3;
	}

	.primary-menu .menu-item > .sub-menu {
		grid-column: 1 / -1;
	}

	.primary-menu a {
		white-space: normal;
	}

	.primary-menu a:hover {
		background: none;
	}

	.menu-caret {
		display: none;
	}

	.submenu-toggle {
		display: flex;
		align-items: center;
		padding: 10px 6px;
		color: var(--gv-white);
	}

	.submenu-toggle .gv-icon {
		width: 28px;
		height: 28px;
		transition: transform 0.3s;
	}

	.submenu-toggle[aria-expanded="true"] .gv-icon {
		transform: rotate(180deg);
	}

	.primary-menu .sub-menu,
	.primary-menu .sub-menu .sub-menu {
		position: static;
		display: none;
		flex-basis: 100%;
		padding-left: 12px;
		visibility: visible;
		opacity: 1;
		border-top: 2px solid #f9c5af;
		box-shadow: none;
		transform: none;
		transition: none;
	}

	.primary-menu .menu-item.is-open > .sub-menu {
		display: flex;
	}

	.primary-menu .sub-menu a,
	.primary-menu .sub-menu a:hover {
		background: none;
	}
}

@media (max-width: 767px) {
	.site-header__top {
		background-position: 0 -30px;
	}

	.site-header__brand {
		margin-bottom: 30px;
	}

	.site-header__bar {
		flex-direction: column;
		padding: 0 15px;
	}

	.site-header__finders {
		display: none;
	}

	.site-header__actions {
		justify-content: space-between;
		max-width: 100%;
	}

	.header-account {
		justify-content: flex-start;
		max-width: 100%;
	}

	.site-header__icons {
		max-width: 39%;
	}

	.header-icon--home,
	.header-icon--search {
		display: flex;
	}
}

@media (max-width: 479px) {
	.site-header__top {
		background-repeat: no-repeat;
		background-position: 0 -54px;
	}

	.site-header__container {
		max-width: 100%;
	}

	.site-header__brand {
		margin-bottom: 0;
	}

	.site-logo__image {
		width: min(330px, 66%);
	}

	.site-header__bar {
		padding: 0 20px;
	}

	.site-header__actions {
		flex-direction: column;
		align-items: center;
	}

	.header-account {
		justify-content: center;
		height: 55px;
		padding-bottom: 2px;
		margin: 0 0 18px;
	}

	.site-header__icons {
		justify-content: space-around;
		max-width: 100%;
	}

	.search-field__input {
		padding: 12px 107px 12px 45px;
		font-size: 14px;
	}

	.search-field__icon {
		left: 12px;
	}

	.search-field__button {
		right: 6px;
		padding: 6px 12px;
		font-size: 12px;
	}

	.brand-select__input {
		padding: 12px 45px 12px 16px;
		font-size: 14px;
	}

	.brand-select__icon {
		right: 12px;
	}

	.site-nav__open .gv-icon {
		width: 30px;
		height: 30px;
	}

	.site-nav__panel {
		width: 80%;
		min-width: 0;
		padding-top: 60px;
		padding-inline: 20px;
	}

	.site-nav__close {
		top: 0;
	}

	.site-nav__close .gv-icon {
		width: 28px;
		height: 28px;
	}

	.primary-menu .sub-menu {
		border-top-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-panel,
	.site-nav__panel,
	.primary-menu .sub-menu {
		transition: none;
	}
}

/* Sugestões de busca (search-suggest.js) ------------------------------------ */

.search-suggest {
	position: absolute;
	top: calc(100% + var(--gv-space-2));
	left: 0;
	z-index: 1100;
	width: max(100%, 520px);
	max-height: min(70vh, 560px);
	overflow-y: auto;
	font-family: var(--gv-font-body);
	text-align: left;
	background: var(--gv-white);
	border: 1px solid var(--gv-line-strong);
	border-radius: var(--gv-radius-lg);
	overscroll-behavior: contain;
}

.search-suggest[hidden] {
	display: none;
}

.search-suggest__group {
	padding: var(--gv-space-3) 0 var(--gv-space-2);
}

.search-suggest__group + .search-suggest__group {
	border-top: 1px solid var(--gv-line);
}

.search-suggest__heading {
	padding: 0 var(--gv-space-4);
	margin: 0 0 var(--gv-space-2);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--gv-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

.search-suggest mark {
	font-weight: 800;
	color: var(--gv-brand);
	background: none;
}

/* Categorias e marcas: etiquetas lado a lado */
.search-suggest__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gv-space-2);
	padding: 0 var(--gv-space-4) var(--gv-space-1);
}

.search-suggest__term {
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	padding: 6px var(--gv-space-3);
	font-size: 14px;
	line-height: 1.3;
	color: var(--gv-ink);
	background: var(--gv-surface);
	border: 1px solid transparent;
	border-radius: var(--gv-radius);
}

.search-suggest__term-type {
	font-size: 10px;
	font-weight: 700;
	color: var(--gv-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.search-suggest__term:hover,
.search-suggest__term[aria-selected="true"] {
	border-color: var(--gv-ink);
}

/* Produtos: foto, nome + marca/código, preço */
.search-suggest__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	gap: var(--gv-space-3);
	align-items: center;
	padding: var(--gv-space-2) var(--gv-space-4);
	color: var(--gv-ink);
}

.search-suggest__item:hover,
.search-suggest__item[aria-selected="true"] {
	background: var(--gv-surface);
}

.search-suggest__image {
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: var(--gv-white);
	border: 1px solid var(--gv-line);
	border-radius: var(--gv-radius-sm);
}

.search-suggest__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.search-suggest__title {
	display: -webkit-box;
	overflow: hidden;
	font-family: var(--gv-font-alt);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.search-suggest__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px var(--gv-space-3);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gv-ink);
}

.search-suggest__label {
	font-weight: 400;
	color: var(--gv-ink-muted);
}

.search-suggest__price {
	font-family: var(--gv-font-alt);
	font-size: 14px;
	font-weight: 800;
	white-space: nowrap;
}

.search-suggest__all {
	display: block;
	padding: var(--gv-space-3) var(--gv-space-4);
	font-size: 14px;
	font-weight: 700;
	color: var(--gv-ink);
	text-align: center;
	background: var(--gv-surface);
	border-top: 1px solid var(--gv-line);
}

.search-suggest__all:hover,
.search-suggest__all[aria-selected="true"] {
	color: var(--gv-white);
	background: var(--gv-ink);
}

.search-suggest__empty {
	display: flex;
	flex-direction: column;
	gap: var(--gv-space-1);
	padding: var(--gv-space-5) var(--gv-space-4);
	font-size: 14px;
	line-height: 1.4;
	color: var(--gv-ink-muted);
	text-align: center;
}

.search-suggest__empty strong {
	color: var(--gv-ink);
}

/* No painel de busca do celular: no fluxo, logo abaixo do campo. */
.search-suggest--inline {
	position: static;
	width: auto;
	max-width: 90%;
	max-height: none;
	margin: 0 auto var(--gv-space-3);
}

/* Carregando: ícone da lupa pulsa enquanto a API responde. */
.search-field.is-loading .search-field__icon {
	animation: gv-suggest-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes gv-suggest-pulse {
	to {
		opacity: 0.3;
	}
}

@media (max-width: 767px) {
	.search-suggest {
		width: 100%;
	}

	.search-suggest__item {
		grid-template-columns: 40px minmax(0, 1fr);
	}

	.search-suggest__image {
		width: 40px;
		height: 40px;
	}

	/* Preço vai para baixo do nome no celular. */
	.search-suggest__price {
		grid-column: 2;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-field.is-loading .search-field__icon {
		animation: none;
	}
}

/* "Você quis dizer" no painel de sugestões */
.search-suggest__corrected,
.search-suggest__did-you-mean {
	display: block;
	padding: var(--gv-space-3) var(--gv-space-4);
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--gv-ink-muted);
	background: var(--gv-surface);
	border-bottom: 1px solid var(--gv-line);
}

.search-suggest__corrected strong,
.search-suggest__did-you-mean strong {
	color: var(--gv-ink);
}

.search-suggest__did-you-mean:hover strong,
.search-suggest__did-you-mean[aria-selected="true"] strong {
	color: var(--gv-brand);
	text-decoration: underline;
}

/* ==========================================================================
   Cabeçalho compacto no celular e no tablet (até 991px)
   Antes: logo de 70% da largura + login + ícones + menu ≈ 460px de altura.
   Agora: logo e ações numa linha, busca visível logo abaixo (~240px).
   ========================================================================== */

.header-account__icon-link {
	display: flex;
	color: inherit;
}

@media (max-width: 991px) {
	.site-header__top {
		padding: var(--gv-space-3) 0 var(--gv-space-4);
		background-repeat: repeat;
		background-position: center;
	}

	/* Logo | ações na 1ª linha; busca na 2ª (o resto do cabeçalho some). */
	.site-header__container {
		display: grid;
		grid-template-areas:
			"brand actions"
			"search search";
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--gv-space-3) var(--gv-space-4);
		align-items: center;
		width: 100%;
		max-width: none;
		padding: 0 var(--gv-space-4);
	}

	.site-header__bar,
	.site-header__finders {
		display: contents;
	}

	.site-header__brand {
		grid-area: brand;
		justify-self: start;
		width: auto;
		margin: 0;
	}

	.site-logo__image {
		width: 96px;
		height: auto;
	}

	.site-header__search {
		grid-area: search;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	.site-header__search .search-field {
		flex: 1;
		width: 100%;
	}

	/* Sem termo, o botão "Pesquisar" está escondido: o texto usa a largura toda. */
	.site-header__search .search-field__input {
		padding-right: var(--gv-space-4);
	}

	.site-header__search .search-field.has-term .search-field__input {
		padding-right: 107px;
	}

	/* Início: o logo já leva para a home. Marcas: ficam no painel de busca. */
	.site-header__home,
	.header-icon--home,
	.header-icon--search {
		display: none !important;
	}

	/* Celular: marcas ficam no painel de busca (não cabem na linha). */
	.site-header__brands {
		display: none;
	}

	.site-header__actions {
		grid-area: actions;
		display: flex;
		flex-direction: row;
		gap: var(--gv-space-1);
		align-items: center;
		justify-content: flex-end;
		width: auto;
		max-width: none;
		margin: 0;
	}

	/* Conta: só o ícone (o texto "Faça seu login…" não cabe). */
	.header-account {
		justify-content: center;
		width: auto;
		max-width: none;
		height: auto;
		padding: 0;
		margin: 0;
	}

	.header-account__text,
	.header-account__hello {
		display: none;
	}

	.header-account__icon-link,
	.header-account__toggle,
	.header-icon {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
	}

	.header-account__icon {
		width: 24px;
		height: 24px;
		margin: 0;
	}

	.header-account__avatar {
		width: 34px;
		height: 34px;
	}

	.site-header__icons {
		display: flex;
		gap: var(--gv-space-1);
		width: auto;
		max-width: none;
		margin: 0;
	}

	.header-icon .gv-icon {
		width: 24px;
		height: 24px;
	}

	.header-icon--cart {
		position: relative;
	}

	.header-icon__count {
		position: absolute;
		top: 2px;
		right: 0;
	}

	/* Menu do cliente logado: abre alinhado à direita da tela. */
	.header-account__menu {
		right: calc(-1 * var(--gv-space-4) - 88px);
	}

	.search-field__input {
		height: 48px;
	}

	/* Barra "Menu" mais baixa. */
	.site-nav__open {
		padding: 10px var(--gv-space-4);
		margin: 0;
		min-height: 48px;
	}
}

/* Menu lateral (até 1339px): setas alinhadas à direita, itens separados. */
@media (max-width: 1339px) {
	.site-nav__panel {
		width: min(360px, 88vw);
		padding: 72px var(--gv-space-5) var(--gv-space-5);
	}

	.primary-menu .menu-item {
		grid-template-columns: minmax(0, 1fr) 44px;
		justify-content: stretch;
		align-items: center;
		border-bottom: 1px solid rgb(255 255 255 / 15%);
	}

	.primary-menu .sub-menu .menu-item:last-child {
		border-bottom: 0;
	}

	.primary-menu a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: var(--gv-space-2) 0;
	}

	.submenu-toggle {
		justify-content: center;
		width: 44px;
		height: 48px;
		padding: 0;
	}

	.submenu-toggle .gv-icon {
		width: 18px;
		height: 18px;
	}

	.primary-menu .sub-menu,
	.primary-menu .sub-menu .sub-menu {
		padding-left: var(--gv-space-4);
		margin-bottom: var(--gv-space-2);
		border-top: 0;
	}
}

/* Tablet (768–991px): mesma área de toque de 44px nos ícones do cabeçalho. */
@media (min-width: 768px) and (max-width: 991px) {
	.header-icon,
	.header-account__icon-link {
		display: grid;
		place-items: center;
		min-width: 44px;
		min-height: 44px;
	}

	.header-icon--cart {
		position: relative;
	}
}

/* Notebook/tablet deitado (992–1339px): conta só com o ícone e a busca
   ocupando o espaço (antes o texto da conta encostava no coração). */
@media (min-width: 992px) and (max-width: 1339px) {
	.site-header__bar {
		gap: var(--gv-space-5);
	}

	.site-header__finders {
		flex: 1;
		min-width: 0;
	}

	.site-header__search {
		flex: 1.4;
		max-width: none;
	}

	.site-header__brands {
		flex: 1;
		max-width: none;
	}

	.site-header__actions {
		flex: none;
		gap: var(--gv-space-1);
		width: auto;
		max-width: none;
	}

	/* Início e lupa: a busca já está visível ao lado. */
	.site-header__icons .header-icon--home,
	.site-header__icons .header-icon--search {
		display: none;
	}

	.header-account {
		width: auto;
		max-width: none;
		margin: 0;
	}

	.header-account__text,
	.header-account__hello {
		display: none;
	}

	.site-header__icons {
		gap: var(--gv-space-1);
		width: auto;
		max-width: none;
	}

	.header-icon,
	.header-account__icon-link,
	.header-account__toggle {
		display: grid;
		place-items: center;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
	}

	.header-icon--cart {
		position: relative;
	}
}

/* Tablet (768–991px): 2ª linha com busca e marcas lado a lado; logo maior. */
@media (min-width: 768px) and (max-width: 991px) {
	.site-header__container {
		grid-template-areas:
			"brand actions"
			"search brands";
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		padding: 0 var(--gv-space-5);
	}

	.site-header__brands {
		display: block;
		grid-area: brands;
		max-width: none;
		padding: 0;
	}

	.site-logo__image {
		width: 112px;
	}
}