/*
 * À Gogo. Proposta agogo-v1 (~/codes/rishi, propostas/previews/agogo-v1), celular primeiro; desktop a partir de 900px.
 * Cores e fontes só por token (theme.json desta loja). Medidas seguem a proposta.
 */

body {
	--agogo-gutter: max(20px, env(safe-area-inset-left, 0px));
	/* Caixa larga com o respiro: o conteúdo fica com wide-size, alinhado ao das páginas do Vitrine. */
	--agogo-wide: calc(var(--wp--style--global--wide-size) + 2 * var(--agogo-gutter));
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	overflow-x: clip;
}

:where(.wp-site-blocks) a:focus-visible,
:where(.wp-site-blocks) button:focus-visible,
:where(.wp-site-blocks) input:focus-visible {
	outline: 2px solid var(--wp--preset--color--rust);
	outline-offset: 2px;
}

h1 em,
h2 em,
h3 em {
	font-style: italic;
}

.agogo-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--rust);
}

.agogo-section {
	box-sizing: border-box;
	max-width: var(--agogo-wide);
	margin-inline: auto;
	padding-inline: var(--agogo-gutter);
}

/*
 * Seção larga dentro do main (que tem o padding global): vai de ponta a ponta no celular
 * e para na largura larga no computador, sem somar o padding do main ao --agogo-gutter.
 * As margens em % contam sobre a largura útil do main.
 */
:root .agogo-section.alignfull,
:root .agogo-pdp.alignfull {
	max-width: none;
	margin-left: max(calc(var(--wp--style--root--padding-left) * -1), calc((100% - var(--agogo-wide)) / 2));
	margin-right: max(calc(var(--wp--style--root--padding-right) * -1), calc((100% - var(--agogo-wide)) / 2));
}

/* Botões da proposta (escuro, claro e só contorno), retos */
.agogo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--wp--custom--control-height);
	padding: 0 24px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--button);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.agogo-btn--dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.agogo-btn--dark:hover {
	background: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--surface);
}

.agogo-btn--light {
	height: 48px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	letter-spacing: 0.04em;
}

.agogo-btn--light:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.agogo-btn--line {
	border: 1px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.agogo-btn--line:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/* Faixa do cupom */
.vitrine-announcement {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 8px 16px;
}

/* Cabeçalho: menu à esquerda, marca no centro, busca e sacola à direita */
.agogo-header {
	transition: box-shadow 0.2s ease;
}

.is-scrolled .agogo-header {
	box-shadow: 0 1px 0 var(--wp--preset--color--border);
}

.agogo-header__in {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	box-sizing: border-box;
	max-width: var(--agogo-wide);
	min-height: var(--wp--custom--header-height--mobile);
	margin-inline: auto;
	padding-inline: var(--agogo-gutter);
}

.agogo-header__in > * {
	margin-block: 0;
}

.agogo-header__left,
.agogo-header__right {
	gap: 0;
}

.agogo-header .wp-block-navigation.agogo-header__nav {
	display: none;
}

.agogo-header__nav .wp-block-navigation-item__content {
	padding-block: 10px;
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
	text-decoration: none;
}

.agogo-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--rust);
}

/* Selo do menu (campo Descrição do link, ex.: Outlet "até 70% off"): ferrugem, como os destaques da loja. */
.wp-site-blocks .agogo-header .wp-block-navigation-item__description {
	background: var(--wp--preset--color--rust);
	color: var(--wp--preset--color--base);
}

.agogo-header .wp-block-navigation__responsive-container-open,
.agogo-header .wc-block-mini-cart__button,
.agogo-header .wp-block-search__button,
.agogo-header__account a {
	display: flex;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	justify-content: center;
	align-items: center;
	color: var(--wp--preset--color--contrast);
}

/*
 * Lupa no celular, ao lado do menu, como no site atual (pedido da Camila). A busca da base some até 782px; esta
 * só aparece até ali. Abre uma faixa de busca embaixo do cabeçalho pelo popover do navegador (sem script): toque
 * fora ou Esc fecha.
 */
.agogo-msearch__open {
	display: flex;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.agogo-msearch {
	box-sizing: border-box;
	inset: 0 0 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 16px 20px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.agogo-msearch::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}

.agogo-msearch__form {
	display: flex;
	gap: 8px;
}

.agogo-msearch__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 16px;
}

.agogo-msearch__go {
	min-height: 48px;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	cursor: pointer;
}

@media (min-width: 783px) {
	.agogo-msearch__open,
	.agogo-msearch {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.agogo-msearch:popover-open {
		animation: agogo-msearch-in var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--out);
	}
}

@keyframes agogo-msearch-in {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
}

/* Busca, conta e sacola maiores, como no site atual (pedido da Camila). O desenho da sacola ocupa menos da caixa, por isso ela é maior. */
.agogo-header .agogo-header__right svg {
	width: 30px;
	height: 30px;
}

.agogo-header .agogo-header__right .wp-block-search__button svg {
	width: 32px;
	height: 32px;
}

.agogo-header .agogo-header__right .wc-block-mini-cart__icon {
	width: 34px;
	height: 34px;
	margin: -4px;
}

.agogo-header__account a:hover {
	color: var(--wp--preset--color--rust);
}

/* Quantidade na sacola: bolinha ferrugem (cor no atributo do bloco), com o número em areia. */
.agogo-header .wc-block-mini-cart__badge {
	font-weight: 600;
}

.agogo-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.agogo-brand:hover {
	color: var(--wp--preset--color--contrast);
}

.agogo-brand b {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--brand);
	line-height: 1;
}

.agogo-brand small {
	margin-top: 4px;
	color: var(--wp--preset--color--muted);
	font-size: 9px;
	letter-spacing: var(--wp--custom--tracking--tagline);
	text-transform: uppercase;
}

/* Destaque: foto inteira, texto embaixo à esquerda sobre um degradê */
.agogo-hero {
	position: relative;
	height: var(--wp--custom--hero--height-desktop);
	overflow: hidden;
	background: var(--wp--preset--color--photo);
}

.agogo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--hero--scrim);
	pointer-events: none;
}

.agogo-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agogo-hero__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 28px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	max-width: var(--agogo-wide);
	margin-inline: auto;
	padding-inline: var(--agogo-gutter);
	color: var(--wp--preset--color--surface);
}

.agogo-hero__copy .agogo-eyebrow {
	color: var(--wp--preset--color--surface);
}

.agogo-hero__title {
	margin: 0;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.95;
}

.agogo-hero__subtitle {
	max-width: 300px;
	margin: 0;
	font-size: 15px;
}

.agogo-hero .agogo-btn,
.agogo-duo .agogo-btn {
	margin-top: 8px;
}

/* O card inteiro é o link (pedido do Fernando); o botão é um <span> que acende quando a cliente passa o mouse no card. */
.agogo-hero__link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.agogo-hero__link:hover .agogo-btn--light,
.agogo-duo__item:hover .agogo-btn--light {
	background: var(--wp--preset--color--base);
}

.agogo-hero__link:focus-visible,
.agogo-duo__item:focus-visible {
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: -6px;
}

/*
 * Dois banners menores lado a lado, logo abaixo do destaque (pedido da Camila: três comunicações na home,
 * todas paradas, sem carrossel). Foto inteira com o título embaixo, no centro; de ponta a ponta, separados por um fio.
 * No celular os três cabem juntos na primeira tela (pedido da Camila, como na Lihá): destaque 4:3 e banners 3:4.
 * No computador os três viram cards iguais lado a lado, 4:5, numa linha só (pedido do Fernando): o .agogo-top
 * vira grade de três colunas e o .agogo-duo some da caixa (display: contents), então os banners entram nela.
 */
.agogo-duo {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 2px;
	background: var(--wp--preset--color--surface);
}

:root .agogo-duo.alignfull {
	margin-top: 2px;
}

.agogo-duo__item {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--photo);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.agogo-duo__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--hero--scrim);
	pointer-events: none;
}

.agogo-duo__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Banners menores no celular: card de meia tela, então título menor, botão mais baixo e o texto mais perto da borda. */
.agogo-duo .agogo-hero__copy {
	bottom: 14px;
	gap: 4px;
	padding-inline: 12px;
}

.agogo-duo .agogo-hero__title {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.agogo-duo .agogo-btn {
	height: 36px;
	margin-top: 4px;
	padding: 0 14px;
	font-size: 12px;
}

@media (min-width: 782px) {
	.agogo-top {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
		background: var(--wp--preset--color--surface);
	}

	.agogo-top > .agogo-hero {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.agogo-top .agogo-duo {
		display: contents;
	}

	/* Num card de um terço da tela o título do destaque fica do tamanho dos títulos dos banners. */
	.agogo-top .agogo-hero__title {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.agogo-top .agogo-hero__copy {
		bottom: 40px;
	}

	.agogo-duo__item {
		aspect-ratio: 4 / 5;
	}

	/* No computador os três cards são iguais: o texto dos menores fica como o do destaque. */
	.agogo-top .agogo-duo .agogo-hero__copy {
		bottom: 40px;
		gap: 10px;
		padding-inline: var(--agogo-gutter);
	}

	.agogo-top .agogo-duo .agogo-hero__title {
		font-size: var(--wp--preset--font-size--xx-large);
		line-height: 0.95;
	}

	.agogo-top .agogo-duo .agogo-btn {
		height: 48px;
		margin-top: 8px;
		padding: 0 24px;
		font-size: 14px;
	}
}

/*
 * Vídeos do painel Rishi (bloco vitrine/videos). Stories no topo da home e a faixa escura
 * "Como cai, como mexe." O desenho é do painel; aqui só o espaço, a cor da faixa e o esqueleto
 * nas cores da loja. A faixa vai de ponta a ponta sem estourar a largura (sombra + recorte).
 */
.agogo-stories {
	padding-block: 12px 4px;
}

.agogo-reels {
	--rishi-videos-skeleton: color-mix(in srgb, var(--wp--preset--color--base) 14%, transparent);
	--rishi-videos-skeleton-shine: color-mix(in srgb, var(--wp--preset--color--base) 24%, transparent);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 44px 40px;
	background: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--contrast);
	clip-path: inset(0 -100vmax);
	color: var(--wp--preset--color--base);
}

.agogo-reels > * {
	margin: 0;
}

.agogo-reels .agogo-eyebrow {
	color: var(--wp--preset--color--peach);
}

.agogo-reels h2 {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
}

.agogo-reels .rishi-videos {
	margin-top: 12px;
}

/* Ateliê */
.agogo-atelie {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block: 48px 36px;
}

.agogo-atelie > * {
	max-width: 720px;
	margin: 0;
}

.agogo-atelie__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.agogo-atelie__text {
	color: var(--wp--preset--color--ink-soft);
}

/* Lançamentos e "Monte seu look": cartões em 2 colunas no celular */
.agogo-launch {
	padding-bottom: 48px;
}

.agogo-sec-head {
	align-items: baseline;
	padding-bottom: 16px;
}

/* .wp-site-blocks e .wp-block-heading: a Woo (product-collection-style.css) põe os títulos dentro de uma
 * lista de produtos em font-size small, com mais especificidade; na cópia da loja real saía com 13px. */
.wp-site-blocks .agogo-sec-head h2.wp-block-heading,
.agogo-sec-head h2,
.agogo-pdp__h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.agogo-sec-head p {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}

.agogo-cards.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 10px;
}

.agogo-cards.wc-block-product-template > li,
.agogo-cards.wc-block-product-template.is-flex-container > li {
	width: auto;
	max-width: none;
	margin: 0;
}

.agogo-cards .wc-block-components-product-image {
	margin-bottom: 10px;
	background: var(--wp--preset--color--photo);
}

.agogo-cards .wc-block-components-product-image img {
	object-position: center 20%;
}

.agogo-card__title {
	margin: 0;
	padding-inline: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.3;
}

.agogo-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.agogo-card__price {
	margin: 2px 0 0;
	padding-inline: 2px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

/*
 * "Escolher tamanho" nos cartões (pedido da Camila: quem não sabe que a foto leva à peça precisa de um botão).
 * Contorno, para a foto continuar mandando; preenche no hover. Fica no pé do cartão, alinhado entre vizinhos.
 */
.agogo-cards.wc-block-product-template > li {
	display: flex;
	flex-direction: column;
}

.agogo-card__button.wp-block-woocommerce-product-button {
	margin-top: auto;
	padding-top: 10px;
}

.wp-site-blocks .agogo-cards .agogo-card__button .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 6px 8px;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--button);
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

.wp-site-blocks .agogo-cards .agogo-card__button .wc-block-components-product-button__button:hover,
.wp-site-blocks .agogo-cards .agogo-card__button .wc-block-components-product-button__button:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/*
 * Tamanhos no cartão (rishi-extras, recurso "Tamanhos no cartão"; pedido da Camila: escolher o tamanho e pôr na
 * sacola sem sair da tela, como no site atual). Antes de escolher, o botão fica em contorno, como o "Escolher
 * tamanho"; com o tamanho escolhido, preenche. Botões de tamanho retos, como os do filtro da loja.
 */
.wp-site-blocks .agogo-cards .rx-quick-buy {
	--rx-quick-size-size: 36px;
	--rx-quick-size-border: var(--wp--preset--color--line-strong);
	--rx-quick-size-radius: 0;
	--rx-quick-button-radius: 0;
	--rx-quick-font-size: 12px;
	--rx-quick-gap: 10px;

	padding-top: 10px;
}

.wp-site-blocks .agogo-cards .rx-quick-buy__button {
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	text-wrap: balance;
}

.wp-site-blocks .agogo-cards .rx-quick-buy__button[disabled] {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	opacity: 1;
}

/*
 * Lançamentos em carrossel com setas, como no site atual (pedido da Camila). É o carrossel da Woo (rolagem com
 * encaixe); as setas são o bloco de anterior/próximo dela, ao lado do "Ver todos". Celular: 2 cartões e a ponta
 * do terceiro, para mostrar que desliza; computador: 4 por vez.
 */
.agogo-launch .agogo-cards.is-product-collection-layout-carousel {
	display: flex;
	gap: 10px;
	padding: 0;
	overflow-x: auto;
	scroll-padding: 0;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.agogo-launch .agogo-cards.is-product-collection-layout-carousel::-webkit-scrollbar {
	display: none;
}

.agogo-launch .agogo-cards.is-product-collection-layout-carousel > li {
	flex: 0 0 calc((100% - 20px) / 2.12);
	min-width: 0;
	max-width: none;
	scroll-snap-align: start;
}

/* No carrossel do celular o cartão é um pouco mais estreito: o botão perde respiro para o texto caber inteiro. */
.wp-site-blocks .agogo-launch .agogo-cards .agogo-card__button .wc-block-components-product-button__button {
	padding-inline: 4px;
}

.agogo-sec-head__end {
	gap: 16px;
	align-items: center;
}

.agogo-launch .wc-block-next-previous-buttons {
	gap: 8px;
}

.agogo-launch .wc-block-next-previous-buttons__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.agogo-launch .wc-block-next-previous-buttons__button:hover,
.agogo-launch .wc-block-next-previous-buttons__button:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.agogo-launch .wc-block-next-previous-buttons__button[aria-disabled="true"] {
	border-color: var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
	.agogo-launch .agogo-cards.is-product-collection-layout-carousel {
		scroll-behavior: smooth;
	}

	.agogo-launch .wc-block-next-previous-buttons__button {
		transition:
			background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--out),
			color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--out),
			transform var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--spring);
	}

	.agogo-launch .wc-block-next-previous-buttons__button:not([aria-disabled="true"]):active {
		transform: scale(0.92);
	}
}

/*
 * Vantagens: uma etiqueta de roupa em areia, com a costura tracejada por dentro e entre os itens.
 * Celular em 2 × 2, computador em 4 colunas.
 */
/* O respiro em volta vem das avaliações (em cima) e da Malinha (embaixo). */
.agogo-perks__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--sand);
	outline: 1px dashed var(--wp--preset--color--line-strong);
	outline-offset: -6px;
}

.agogo-perk {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px 14px;
}

.agogo-perk:nth-child(odd) {
	border-right: 1px dashed var(--wp--preset--color--line-strong);
}

.agogo-perk:nth-child(-n + 2) {
	border-bottom: 1px dashed var(--wp--preset--color--line-strong);
}

.agogo-perk__icon {
	margin-bottom: 6px;
	color: var(--wp--preset--color--rust);
}

.agogo-perk__title,
.agogo-perk__text {
	margin: 0;
}

/*
 * Número ou palavra-chave em Instrument Sans firme (a Bodoni em corpo grande some nos traços finos)
 * e o complemento no itálico da Bodoni em ferrugem, mais encorpado (500), que é a assinatura da loja.
 */
.agogo-perk__title {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.agogo-perk__title em {
	color: var(--wp--preset--color--rust);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.08em;
	font-weight: 500;
	letter-spacing: 0;
}

.agogo-perk__text {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Malinha delivery */
.agogo-malinha {
	display: grid;
	gap: 18px;
	padding-block: 48px;
}

.agogo-malinha__img {
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.agogo-malinha__copy {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.agogo-malinha__copy > * {
	margin: 0;
}

.agogo-malinha__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.agogo-malinha__copy p {
	color: var(--wp--preset--color--ink-soft);
}

.agogo-malinha__copy p.agogo-malinha__addr {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

/* Produto */
.agogo-pdp {
	box-sizing: border-box;
}

.agogo-pdp__crumbs {
	display: none;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
}

.agogo-pdp__crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.agogo-pdp__grid {
	margin: 0;
}

.agogo-pdp__gallery img,
.agogo-pdp__gallery video {
	background: var(--wp--preset--color--photo);
	object-position: center 25%;
}

/* Galeria (inc/gallery.php): celular = fotos que deslizam (a Woo cuida do toque) com as miniaturas embaixo; computador = carrossel de duas fotos com setas (pedido da Camila). */
.agogo-pdp__gallery .wc-block-product-gallery-large-image {
	aspect-ratio: auto;
	overflow: visible;
}

.agogo-pdp__gallery .wc-block-product-gallery-large-image__wrapper {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--photo);
}

.agogo-pdp__gallery .wc-block-product-gallery-large-image__video {
	object-fit: cover;
}

.agogo-gallery__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px 4px 6px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
	color: var(--wp--preset--color--contrast);
	font-size: 11px;
	font-weight: 500;
	pointer-events: none;
}

/*
 * Miniaturas da Woo embaixo da foto, só no celular (pedido da Camila: a cliente vê logo que há mais fotos). Quatro na
 * largura (a da vez e mais três), a da vez com contorno; com mais fotos, a fila desliza.
 */
.wp-site-blocks .agogo-pdp__gallery .wc-block-product-gallery-thumbnails.agogo-gallery__thumbs {
	flex-basis: auto;
	align-self: stretch;
	width: auto;
	min-width: 0;
	height: auto;
	aspect-ratio: auto;
	margin-top: 8px;
	padding-inline: var(--agogo-gutter);
}

.agogo-gallery__thumbs .wc-block-product-gallery-thumbnails__scrollable {
	display: flex;
	flex-direction: row;
	height: auto;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.agogo-gallery__thumbs .wc-block-product-gallery-thumbnails__thumbnail {
	flex: 0 0 calc((100% - 24px) / 4);
	min-width: 0;
	height: auto;
	aspect-ratio: 3 / 4;
	background: var(--wp--preset--color--photo);
}

.agogo-gallery__thumbs .wc-block-product-gallery-thumbnails__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.agogo-gallery__thumbs .wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
	outline-color: var(--wp--preset--color--contrast);
}

/* Setas da galeria só no computador; no celular a cliente desliza com o dedo. */
.agogo-pdp__gallery .wc-block-next-previous-buttons {
	display: none;
}

/*
 * Computador (pedido da Camila, 2026-10-27, na referência da Les Cloches que o Fernando escolheu): carrossel de
 * duas fotos lado a lado com setas, sem miniaturas; a página não cresce com 5 ou 6 fotos. O carrossel e as setas
 * são da Woo (a seta passa uma foto); aqui só cada foto ocupa metade da largura.
 */
@media (min-width: 782px) {
	/* A Woo avança pela largura da caixa: o vão entre as fotos fica dentro de cada uma (padding), e a caixa passa
	 * 8px da coluna, para cada clique andar exatamente duas fotos. */
	.agogo-pdp__gallery .wc-block-product-gallery-large-image__container {
		gap: 0;
		margin-right: -8px;
	}

	.agogo-pdp__gallery .wc-block-product-gallery-large-image__wrapper {
		flex: 0 0 50%;
		box-sizing: border-box;
		min-width: 0;
		padding-right: 8px;
		background: transparent;
	}

	/* Peça com uma foto só: no meio da coluna, sem o vazio à direita. */
	.agogo-pdp__gallery .wc-block-product-gallery-large-image__wrapper:only-child {
		margin-inline: auto;
		padding-inline: 4px;
	}

	.agogo-pdp__gallery .wc-block-product-gallery-large-image__wrapper img {
		transition: transform 0.6s ease;
	}

	.agogo-pdp__gallery .wc-block-product-gallery-large-image__wrapper:hover img {
		transform: scale(1.03);
	}

	.wp-site-blocks .agogo-pdp__gallery .wc-block-product-gallery-thumbnails.agogo-gallery__thumbs {
		display: none;
	}

	.agogo-pdp__gallery .wc-block-next-previous-buttons {
		display: flex;
	}

	.agogo-pdp__gallery .wc-block-next-previous-buttons__button {
		width: 44px;
		height: 44px;
		border: 0;
		border-radius: 0;
		background: color-mix(in srgb, var(--wp--preset--color--surface) 88%, transparent);
		color: var(--wp--preset--color--contrast);
		opacity: 1;
	}

	.agogo-pdp__gallery .wc-block-next-previous-buttons__button[aria-disabled="true"] {
		opacity: 0;
		pointer-events: none;
	}
}

.agogo-pdp__info {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px var(--agogo-gutter) 32px;
}

.agogo-pdp__info > * {
	margin: 0;
}

/* Título e preço no tamanho de texto, não de título de seção: com o xx-large e o x-large (fluidos, até 48 e 44px)
 * o nome e o preço ficavam gigantes ao lado do Pix e das parcelas (pedido do Fernando, 2026-10-27). */
.agogo-pdp__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.agogo-pdp__price {
	margin-top: -12px;
	font-size: 20px;
	font-weight: 600;
}

/*
 * Preço do produto (pedido da Camila, como no site atual): o preço da peça em cima, o preço no Pix embaixo e as
 * parcelas. É o layout padrão do simulador de parcelas (opções da loja), só com as cores e tamanhos da loja.
 */
.wp-site-blocks .agogo-pdp__price .wc-block-components-product-price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	color: var(--wp--preset--color--contrast);
}

.wp-site-blocks .agogo-pdp__price .wc-block-components-product-price > .amount,
.wp-site-blocks .agogo-pdp__price .wc-block-components-product-price > del,
.wp-site-blocks .agogo-pdp__price .wc-block-components-product-price > ins {
	color: var(--wp--preset--color--contrast);
	font-size: inherit;
	font-weight: 600;
	line-height: 1.1;
	opacity: 1;
}

.wp-site-blocks .agogo-pdp__price .wc-block-components-product-price > del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment {
	margin: 0;
}

.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment + .payment {
	margin-top: 4px;
}

.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment-discount .payment-price,
.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment-discount .payment-price .amount {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment-discount .payment-name {
	margin: 0 0 0 4px;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment-card .payment-name,
.wp-site-blocks .agogo-pdp__price .wcsp-container-product .payment-card .payment-name .amount {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wp-site-blocks .agogo-pdp__price .wcsp-container-product .wcsp-toggle-all-installments {
	margin-top: 8px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* Tamanhos: botões largos, o escolhido em tinta. A caixa ocupa a coluna (o grupo vertical da Woo a
 * encolhe até o conteúdo) e o rótulo não quebra ("GG" saía em duas linhas). */
.agogo-pdp__buy .wp-block-woocommerce-product-filter-chips {
	align-self: stretch;
	padding: 0;
}

/* O <fieldset> dos tamanhos chega com a borda e o recuo do navegador: os tamanhos saíam 20px para dentro. */
.agogo-pdp__buy .wc-block-product-filter-chips__fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.agogo-pdp__buy .wc-block-product-filter-chips__items {
	display: flex;
	gap: 8px;
}

.agogo-pdp__buy .wc-block-product-filter-chips__item {
	flex: 1;
	justify-content: center;
	height: 48px;
	padding-inline: 4px;
	white-space: nowrap;
	border-radius: 0;
	font-size: 15px;
	font-weight: 500;
}

.agogo-pdp__buy .wc-block-add-to-cart-with-options-variation-selector-attribute-name {
	font-size: 14px;
}

.agogo-pdp__buy .wc-block-components-product-button,
.agogo-pdp__buy .single_add_to_cart_button,
.agogo-pdp__buy .wp-block-woocommerce-product-button {
	flex: 1;
	width: 100%;
}

/* .wp-site-blocks vence o width: auto da Woo (.wp-block-button.wc-block-components-product-button .wp-block-button__link) */
.wp-site-blocks .agogo-pdp__buy .single_add_to_cart_button,
.wp-site-blocks .agogo-pdp__buy .wc-block-components-product-button__button {
	width: 100%;
	height: 54px;
	font-size: 15px;
}

/* Peça de roupa: uma por vez, sem seletor de quantidade (como na proposta) */
.agogo-pdp__buy .wc-block-add-to-cart-with-options__quantity-selector,
.agogo-pdp__buy .wp-block-woocommerce-add-to-cart-with-options-quantity-selector {
	display: none;
}

.agogo-pdp__wa {
	margin-top: -10px;
}

/*
 * "Monte seu look" = Compre Junto (rishi-buy-together) dentro da compra: as variáveis do plugin nos tokens da loja
 * (cantos retos, tinta, ferrugem na economia, título na fonte de texto).
 */
.agogo-pdp__buy {
	--rbt-accent: var(--wp--preset--color--contrast);
	--rbt-accent-contrast: var(--wp--preset--color--accent-contrast);
	--rbt-accent-soft: var(--wp--preset--color--sand);
	--rbt-text: var(--wp--preset--color--contrast);
	--rbt-muted: var(--wp--preset--color--muted);
	--rbt-border: var(--wp--preset--color--border);
	--rbt-surface: var(--wp--preset--color--surface);
	--rbt-success: var(--wp--preset--color--rust);
	--rbt-success-soft: var(--wp--preset--color--sand);
	--rbt-heading-font: var(--wp--preset--font-family--body);
	--rbt-radius: 0;
	--rbt-radius-item: 0;
}

.agogo-pdp__perks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 14px;
	list-style: none;
}

.agogo-pdp__perks li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.agogo-pdp__perks li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--rust);
}

.agogo-pdp__perks a {
	color: inherit;
}

.agogo-pdp__about {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.agogo-pdp__about p {
	margin: 0 0 10px;
	color: var(--wp--preset--color--ink-soft);
}

/* Rodapé */
/*
 * Página que fecha com faixa colorida de ponta a ponta (cadastro na home, vídeos no produto): sem o blockGap da raiz
 * antes do rodapé, a faixa encosta no fio do rodapé. As outras páginas mantêm o respiro.
 */
.wp-site-blocks > :has(> :is(.agogo-news, .agogo-reels):last-child, > main > :is(.agogo-news, .agogo-reels):last-child) + footer.wp-block-template-part {
	margin-block-start: 0;
}

.agogo-footer {
	margin-top: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.agogo-footer__in {
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-sizing: border-box;
	max-width: var(--agogo-wide);
	margin-inline: auto;
	padding: 40px var(--agogo-gutter) 32px;
}

/* Celular: espaço no fim para o botão flutuante do WhatsApp não cobrir o rodapé (cobria o @ do Instagram). */
@media (max-width: 781px) {
	.agogo-footer__in {
		padding-bottom: 96px;
	}
}

.agogo-brand--footer {
	align-items: flex-start;
}

.agogo-brand--footer b {
	font-size: 30px;
}

.agogo-footer__links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	font-size: 14px;
}

.agogo-footer__links div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.agogo-footer__links a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.agogo-footer__links a:hover {
	color: var(--wp--preset--color--rust);
}

.agogo-footer p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	line-height: 1.6;
}

.agogo-footer p.agogo-footer__legal {
	font-size: 12px;
}

/* Avaliações no produto */
/* Monte seu look e relacionados no produto: respiro entre as seções e o título longe dos cartões. */
.agogo-related {
	padding-block: 48px 0;
}

/* Monte seu look: no computador embaixo da galeria (coluna da esquerda), no celular depois da compra e antes
 * de "Sobre a peça" (pedido do Fernando, 2026-10-27). O pattern imprime os dois; aqui fica um só à vista. */
.agogo-look--side {
	display: none;
}

.agogo-look--inline {
	padding-top: 8px;
}

@media (min-width: 782px) {
	.agogo-look--side {
		display: block;
		padding-top: 40px;
	}

	.agogo-look--inline {
		display: none;
	}
}

.agogo-look > .agogo-pdp__h2,
.agogo-related > .agogo-pdp__h2 {
	margin-bottom: var(--wp--preset--spacing--20);
}

.agogo-pdp-reviews {
	padding-block: 48px;
}

.agogo-pdp-reviews .wp-block-woocommerce-product-reviews {
	max-width: 760px;
}

.agogo-pdp-review {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.agogo-pdp-review > * {
	margin: 0;
	text-align: left;
}

.agogo-pdp-review .wc-block-components-product-rating__container,
.agogo-pdp-review .wc-block-components-product-rating {
	justify-content: flex-start;
	text-align: left;
}

.agogo-pdp-review .wc-block-components-product-rating__stars {
	margin-inline: 0;
}

.agogo-pdp-review .wp-block-woocommerce-product-review-content {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-style: italic;
	line-height: 1.4;
}

.agogo-pdp-review__meta {
	gap: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.agogo-pdp-reviews .star-rating span::before,
.agogo-pdp__rating .star-rating span::before {
	color: var(--wp--preset--color--rust);
}

.agogo-pdp-reviews .star-rating::before,
.agogo-pdp__rating .star-rating::before {
	color: var(--wp--preset--color--line-strong);
}

.agogo-pdp-reviews .wp-block-woocommerce-product-review-form {
	margin-top: 32px;
}

/* Avaliações pelo plugin WC Advanced Reviews (o resto vem dos tokens, no Vitrine): estrelas na cor da
 * loja e botões e filtros retos como os da loja. */
.agogo-pdp-reviews .wcar-reviews {
	--wcar-star: var(--wp--preset--color--rust);
	--wcar-star-empty: var(--wp--preset--color--line-strong);
	--wcar-radius-control: var(--wp--custom--radius--sm);
}

/* Simulador de parcelas (preço no Pix e parcelas): cores e cantos da loja */
.wp-site-blocks .wcsp-l {
	--wcsp-l-text: var(--wp--preset--color--contrast);
	--wcsp-l-text-soft: var(--wp--preset--color--ink-soft);
	--wcsp-l-muted: var(--wp--preset--color--muted);
	--wcsp-l-border: var(--wp--preset--color--border);
	--wcsp-l-surface: var(--wp--preset--color--surface);
	--wcsp-l-subtle: var(--wp--preset--color--sand);
	--wcsp-l-accent: var(--wp--preset--color--contrast);
	--wcsp-l-accent-text: var(--wp--preset--color--contrast);
	--wcsp-l-on-accent: var(--wp--preset--color--base);
	--wcsp-l-accent-soft: var(--wp--preset--color--sand);
	--wcsp-l-radius: 0;
}

/*
 * Preço nos cartões, como no site oficial (2026-10-27): o preço da peça, o preço no Pix e as parcelas, uma
 * linha cada. Layout padrão do simulador de parcelas (opções `loop_*` da loja, iguais às do produto).
 * O preço da peça é o destaque e o Pix vem embaixo, menor (pedido da Camila, 2026-10-28).
 */
.wp-site-blocks .agogo-cards .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	text-align: left;
}

.wp-site-blocks .agogo-cards .wc-block-components-product-price > .amount,
.wp-site-blocks .agogo-cards .wc-block-components-product-price > ins {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	text-decoration: none;
	opacity: 1;
}

.wp-site-blocks .agogo-cards .wc-block-components-product-price > del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	opacity: 1;
}

/* Promoção: o preço antigo riscado e o novo na mesma linha; o Pix e as parcelas sempre embaixo. */
.wp-site-blocks .agogo-cards .wcsp-container-loop {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
	gap: 2px;
}

.wp-site-blocks .agogo-cards .wcsp-container-loop .payment {
	margin: 0;
}

/* Um nível a mais (`.wc-block-components-product-price`): o CSS do plugin carrega depois e dava 17px ao Pix. */
.wp-site-blocks .agogo-cards .wc-block-components-product-price .wcsp-container-loop .payment-discount .payment-price,
.wp-site-blocks .agogo-cards .wc-block-components-product-price .wcsp-container-loop .payment-discount .payment-price .amount {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wp-site-blocks .agogo-cards .wcsp-container-loop .payment-discount .payment-name {
	margin: 0 0 0 4px;
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.wp-site-blocks .agogo-cards .wcsp-container-loop .payment-card .payment-name,
.wp-site-blocks .agogo-cards .wcsp-container-loop .payment-card .payment-name .amount {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/*
 * Selo de cashback (rishi-extras, recurso "Selo de Giftback" com o nome "cashback", 15%).
 * O plugin traz o layout; aqui o valor em ferrugem e os cantos retos da loja. Nos cartões, sem caixa:
 * uma linha discreta logo abaixo das parcelas, alinhada à esquerda como o resto do cartão.
 */
.rx-giftback {
	--rx-giftback-value: var(--wp--preset--color--rust);
	--rx-giftback-icon: var(--wp--preset--color--rust);
	--rx-giftback-single-radius: var(--wp--custom--radius--sm);
}

.wp-site-blocks .agogo-cards .rx-giftback--card {
	justify-content: flex-start;
	margin-block-start: 2px;
	padding: 0;
	gap: 4px;
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-weight: 500;
	text-align: left;
}

/*
 * WhatsApp flutuante (rishi-extras, recurso "WhatsApp flutuante"; pedido da Camila, como no site atual).
 * O plugin traz o layout; aqui a etiqueta com os cantos retos da loja. O `body` na frente ganha do CSS do plugin,
 * que carrega no rodapé.
 */
body .rx-whatsapp {
	--rx-whatsapp-label-radius: var(--wp--custom--radius--sm);
	--rx-whatsapp-label-text: var(--wp--preset--color--contrast);
}

/* Submenu "Produtos" do cabeçalho (computador) */
.agogo-header__nav .wp-block-navigation__submenu-container {
	min-width: 200px;
	padding: 10px 0;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.agogo-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
}

.agogo-header__nav .wp-block-navigation__submenu-icon {
	margin-left: 4px;
}

/* Tamanhos à mostra: seção da home (links para a loja filtrada) */
.agogo-sizes__list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agogo-sizes__item,
.agogo-size-filter .wc-block-product-filter-chips__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.agogo-sizes__item:hover,
.agogo-size-filter .wc-block-product-filter-chips__item:hover {
	border-color: var(--wp--preset--color--contrast);
}

/* Filtro de tamanho do catálogo: bloco nativo da Woo (Filtros de produto › Atributo, em botões),
 * na coluna da esquerda: os botões quebram linha, sem rolar de lado. */
.agogo-size-filter .wp-block-woocommerce-product-filter-chips {
	padding: 0;
	font-size: 14px;
}

.agogo-size-filter .wc-block-product-filter-chips__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.agogo-size-filter .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.agogo-size-filter .wc-block-product-filter-chips__items {
	flex-wrap: wrap;
	gap: 8px;
}

.agogo-sizes__label {
	flex: none;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
}

.agogo-sizes-wrap {
	padding-block: 48px;
}

/* Linha entre seções só na largura do conteúdo (sem passar para o respiro). */
.agogo-sizes-wrap,
.agogo-reviews,
.agogo-pdp-reviews {
	background: linear-gradient(var(--wp--preset--color--border), var(--wp--preset--color--border)) no-repeat top center / calc(100% - 2 * var(--agogo-gutter)) 1px;
}

.agogo-sizes--home {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.agogo-sizes__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.agogo-sizes__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
}

.agogo-sizes__text {
	max-width: 520px;
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
}

.agogo-sizes--home .agogo-sizes__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.agogo-sizes--home .agogo-sizes__item {
	width: 100%;
	height: 52px;
	background: var(--wp--preset--color--surface);
	font-size: 15px;
}

.agogo-sizes--home .agogo-sizes__item:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Avaliações da home */
.agogo-stars {
	display: inline-block;
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
}

.agogo-stars::before {
	content: "★★★★★";
	background: linear-gradient(90deg, var(--wp--preset--color--rust) calc(var(--agogo-rating, 5) * 20%), var(--wp--preset--color--line-strong) 0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.agogo-reviews {
	display: grid;
	gap: 32px;
	padding-block: 48px;
}

.agogo-reviews__score {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.agogo-reviews__number {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.9;
}

.agogo-reviews__count {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	font-size: 14px;
}

.agogo-reviews__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.agogo-review {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 22px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.agogo-review__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 19px;
	font-style: italic;
	line-height: 1.35;
}

.agogo-review__who {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.agogo-review__who b {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.agogo-review__who a {
	color: var(--wp--preset--color--muted);
}

/* "Ficou na dúvida?" com WhatsApp */
.agogo-help {
	box-sizing: border-box;
	padding: 40px var(--agogo-gutter);
	background: var(--wp--preset--color--sand);
}

/* A faixa areia vai de ponta a ponta (pedido do Fernando); o conteúdo começa na linha do cabeçalho. */
.agogo-help__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.agogo-help__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.agogo-help__copy > * {
	margin: 0;
}

.agogo-help__title {
	font-size: var(--wp--preset--font-size--x-large);
}

.agogo-help__copy p {
	color: var(--wp--preset--color--ink-soft);
}

/* Loja, categorias e busca */
.agogo-main {
	margin-block: 0;
	padding-bottom: 72px;
}

.agogo-catalog-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-block: 20px 8px;
}

.agogo-catalog-head > * {
	margin-block: 0;
}

.agogo-catalog-head .agogo-pdp__crumbs {
	display: block;
	margin-bottom: 4px;
}

/* Sem o título grande na loja e nas categorias: o menu e o caminho já dizem onde a cliente está, e o título
 * deixava um vão em cima das peças (pedido da Camila, 2026-10-28). O h1 fica para o Google e o leitor de tela. */
.agogo-catalog-head__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.agogo-catalog-head .vitrine-chips {
	margin: 6px 0 0;
}

.agogo-catalog-head .vitrine-chips__list {
	gap: 22px;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.agogo-catalog-head .vitrine-chips__item {
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	background: none;
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.agogo-catalog-head .vitrine-chips__item:hover,
.agogo-catalog-head .vitrine-chips__item.is-active {
	border-color: var(--wp--preset--color--contrast);
	background: none;
	color: var(--wp--preset--color--contrast);
}

.agogo-catalog-head .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: none;
}

/* Filtro sem opção (busca sem resultado, categoria com uma peça só): a Woo marca com --hidden, mas o
 * .agogo-filter o mostrava e sobrava o título "Tamanho" ou "Preço" sem nada embaixo. */
.agogo-filter.wc-block-product-filter--hidden,
.agogo-size-filter:not(:has(.wc-block-product-filter-chips__item)) {
	display: none;
}

/* Sem tamanho nem preço à vista, as categorias abrem a coluna: sem a linha em cima. */
.agogo-filters:not(:has(.agogo-size-filter .wc-block-product-filter-chips__item)):has(.wp-block-woocommerce-product-filter-price.wc-block-product-filter--hidden) .agogo-filter--categories {
	padding-top: 0;
	border-top: 0;
}

/* Busca: as categorias já estão na coluna; a faixa de categorias do topo da base repetia a lista. */
.agogo-catalog-head .vitrine-chips {
	display: none;
}

/* Topo da busca (vitrine/hidden-search-head): o sobretítulo como os da loja. */
.agogo-catalog-head .vitrine-search-head__eyebrow {
	color: var(--wp--preset--color--rust);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
}

/* Catálogo: coluna à esquerda (categorias, preço, tamanhos) e grade. No celular, a coluna vira o
 * botão "Filtrar produtos" da Woo, que abre a gaveta, ao lado da ordem. */
.agogo-catalog__layout {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas: "side tools" "grid grid";
	align-items: center;
	column-gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
}

.agogo-catalog__layout > * {
	margin-block: 0;
}

/* Loja e categorias, sem o título à mostra: as peças logo abaixo do caminho, sem vão (pedido da Camila, 2026-10-28). */
.agogo-catalog-head:has(.agogo-catalog-head__title) {
	padding-bottom: 0;
}

.agogo-catalog-head:has(.agogo-catalog-head__title) .agogo-pdp__crumbs {
	margin-bottom: 0;
}

.agogo-catalog-head:has(.agogo-catalog-head__title) + .agogo-catalog {
	margin-block-start: var(--wp--preset--spacing--10);
}

.agogo-catalog-head:has(.agogo-catalog-head__title) + .agogo-catalog .agogo-catalog__layout {
	padding-top: 0;
}

.agogo-catalog__side {
	grid-area: side;
}

.agogo-catalog__grid {
	display: contents;
}

.agogo-catalog__grid > * {
	grid-column: 1 / -1;
}

.agogo-catalog__grid > .agogo-catalog__tools {
	grid-area: tools;
}

.agogo-filters .wc-block-product-filters__open-overlay {
	gap: 8px;
	white-space: nowrap;
	padding: 10px 0;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.agogo-filter {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding-block: 0 var(--wp--preset--spacing--30);
}

.agogo-filter + .agogo-filter {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
}

.agogo-filter > * {
	margin-block: 0;
}

.agogo-filter--categories .vitrine-chips__item {
	padding-block: 6px;
	color: var(--wp--preset--color--ink-soft);
	font-size: 14px;
}

.agogo-filter--categories .vitrine-chips__item.is-active {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.agogo-filters__clear .wp-block-button__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.agogo-catalog__tools {
	align-items: center;
	padding-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: 13px;
}

.agogo-catalog__tools > * {
	min-width: 0;
	max-width: 100%;
	margin: 0;
}

/* "Ordenar" só aparece na coluna do computador; no celular a ordem fica ao lado de "Filtrar produtos". */
.agogo-catalog__sort-label {
	display: none;
}

@media (min-width: 782px) {
	.agogo-catalog__sort-label {
		display: block;
	}
}

/* A ordem cabe ao lado de "Filtrar produtos" no celular: a Woo fixa a largura do select. */
.agogo-catalog__tools .woocommerce-ordering,
.agogo-catalog__tools .woocommerce-ordering select {
	min-width: 0;
	max-width: 100%;
}

.agogo-catalog__tools .woocommerce-ordering select {
	padding: 6px 24px 6px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 0;
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
}

.agogo-cards .wc-block-components-product-sale-badge {
	margin: 10px;
	padding: 4px 8px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.agogo-card__price del {
	margin-right: 6px;
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.agogo-card__price ins {
	text-decoration: none;
}

.agogo-pages {
	gap: 6px;
	margin-top: 48px;
	font-size: 14px;
}

.agogo-pages a,
.agogo-pages .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.agogo-pages .current {
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

.agogo-catalog__empty {
	padding-block: 32px;
	color: var(--wp--preset--color--ink-soft);
}

@media (min-width: 900px) {
	.agogo-header__in {
		min-height: var(--wp--custom--header-height--desktop);
	}

	.agogo-header .wp-block-navigation.agogo-header__menu {
		display: none;
	}

	/* Marca no centro em cima; menu centralizado na linha de baixo (cabe Produtos, Lançamentos, Best-sellers, Outlet, Vídeos e Malinha). */
	.agogo-header__in {
		grid-template-rows: auto auto;
		row-gap: 0;
	}

	.agogo-header .agogo-header__left {
		display: contents;
	}

	.agogo-brand {
		grid-column: 2;
		grid-row: 1;
		padding-top: 14px;
	}

	.agogo-header__right {
		grid-column: 3;
		grid-row: 1;
	}

	.agogo-header .wp-block-navigation.agogo-header__nav {
		display: flex;
		grid-column: 1 / -1;
		grid-row: 2;
		justify-content: center;
		padding-block: 6px 4px;
	}

	.agogo-header__nav .wp-block-navigation__container {
		gap: 32px;
	}

	.agogo-header__nav .wp-block-navigation-item__content {
		white-space: nowrap;
	}

	.agogo-hero__copy {
		bottom: 56px;
	}

	.agogo-hero__subtitle {
		max-width: 420px;
		font-size: 17px;
	}

	.agogo-atelie {
		padding-block: 88px 56px;
	}

	.agogo-cards.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 40px 20px;
	}

	/* Carrinho vazio e relacionados do produto: 4 peças numa linha só (2 por linha no celular). */
	.agogo-related .agogo-cards.wc-block-product-template,
	.vitrine-cart-new .agogo-cards.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Lançamentos: 4 peças por vez no carrossel (pedido da Camila). */
	.agogo-launch .agogo-cards.is-product-collection-layout-carousel {
		gap: 16px;
	}

	.agogo-launch .agogo-cards.is-product-collection-layout-carousel > li {
		flex-basis: calc((100% - 48px) / 4);
	}

	.agogo-perks__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 8px;
		outline-offset: -8px;
	}

	.agogo-perk {
		gap: 8px;
		padding: 36px 32px;
	}

	.agogo-perk:nth-child(n) {
		border: 0;
	}

	.agogo-perk + .agogo-perk {
		border-left: 1px dashed var(--wp--preset--color--line-strong);
	}

	.agogo-perk__icon {
		width: 32px;
		height: 32px;
	}

	/* O itálico desce para a linha de baixo nos quatro: títulos da mesma altura, sem quebra solta. */
	.agogo-perk__title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	.agogo-perk__title em {
		display: block;
	}

	.agogo-perk__text {
		font-size: var(--wp--preset--font-size--medium);
	}

	.agogo-malinha {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: center;
		padding-block: 88px;
	}

	.agogo-malinha__img {
		height: 520px;
	}

	.agogo-malinha .agogo-btn {
		align-self: flex-start;
		padding: 0 32px;
	}

	.agogo-pdp {
		padding: 24px var(--agogo-gutter) 0;
	}

	.agogo-pdp__crumbs {
		display: block;
		margin-bottom: 16px;
	}

	.agogo-pdp__info {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--header-height--desktop) + 20px);
		gap: 22px;
		padding: 0;
	}

	.agogo-footer__in {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.agogo-footer__links {
		gap: 48px;
	}

	.agogo-footer p.agogo-footer__legal {
		flex-basis: 100%;
	}
}

@media (min-width: 900px) {
	.agogo-sizes-wrap {
		padding-block: 72px;
	}

	.agogo-sizes--home {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 48px;
	}

	.agogo-sizes--home .agogo-sizes__list {
		grid-template-columns: repeat(5, 64px);
	}

	.agogo-reviews {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: 64px;
		padding-block: 72px;
	}

	.agogo-reviews__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}

	.agogo-review {
		padding-block: 22px 0;
	}

	.agogo-help {
		padding-block: 48px;
	}

	.agogo-help__inner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.agogo-catalog-head {
		padding-block: 24px 4px;
	}

	/* Coluna fixa de 220px à esquerda e a grade em 3 colunas, como no site atual. A ordem fica no topo da
	 * coluna, junto dos filtros, e as peças começam na altura do topo (pedido do Fernando, 2026-10-27). */
	.agogo-catalog__layout {
		grid-template-columns: 220px minmax(0, 1fr);
		grid-template-areas: none;
		align-items: start;
		column-gap: 48px;
	}

	.agogo-catalog__grid > * {
		grid-column: 2;
	}

	.agogo-catalog__grid > .agogo-catalog__tools {
		grid-area: auto;
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		justify-content: flex-start;
		padding-block: 0 var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.agogo-catalog__side {
		grid-column: 1;
		grid-row: 2 / span 20;
		align-self: stretch;
		padding-top: var(--wp--preset--spacing--30);
	}

	.agogo-catalog__grid > .wc-block-product-template {
		grid-row: 1 / span 2;
	}

	.agogo-catalog__tools .woocommerce-ordering,
	.agogo-catalog__tools .woocommerce-ordering select {
		width: 100%;
	}

	.agogo-cards--catalog.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* No tablet o card do destaque é estreito: chamada, título e botão, como no celular. */
@media (min-width: 782px) and (max-width: 1099px) {
	.agogo-top .agogo-hero__subtitle {
		display: none;
	}
}

/* Até 781px o destaque tem o formato do recorte do celular (rishi-crop-4x3). */
@media (max-width: 781px) {
	.agogo-hero {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	/* No destaque baixo do celular cabem chamada, título e botão; o subtítulo fica para o computador. */
	.agogo-hero__subtitle {
		display: none;
	}

	.agogo-hero__copy {
		bottom: 20px;
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.agogo-header,
	.agogo-btn,
	.agogo-sizes__item,
	.agogo-size-filter .wc-block-product-filter-chips__item,
	.agogo-pdp__gallery .wc-block-product-gallery-large-image__wrapper img {
		transition: none;
	}
}

/*
 * Cadastro de e-mail (bloco vitrine/signup): o formulário é o pop-up "Cadastro de e-mail · home" do painel,
 * no formato Widget na página (seletor .rishi-signup, append). A faixa areia vai de ponta a ponta; o conteúdo
 * começa na linha do cabeçalho. Sem pop-up, a faixa inteira some (Vitrine).
 */
.agogo-news {
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--50) var(--agogo-gutter);
	background: var(--wp--preset--color--sand);
}

.agogo-news > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Logo depois do "Ficou na dúvida?" as duas faixas areia viram uma só, separadas por um fio na largura do conteúdo. */
.agogo-help + .agogo-news {
	padding-top: 0;
}

.agogo-help + .agogo-news > * {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--border);
}

/*
 * Movimento (pedido do Fernando: a loja tem que ter vida, como a proposta). As entradas ao rolar são da base
 * (classe vitrine-reveal; os cartões entram sozinhos) e os tempos vêm de custom.motion. Aqui: a entrada do destaque
 * ao abrir, o traço feito à mão sob o itálico dos títulos (Agogo\scribble) e os hovers da loja.
 */
.agogo-scribble {
	position: absolute;
	left: -3%;
	bottom: -0.2em;
	width: 106%;
	height: 0.34em;
	overflow: visible;
	fill: none;
	stroke: var(--wp--preset--color--rust);
	stroke-width: 2.4;
	stroke-linecap: round;
	pointer-events: none;
}

.agogo-scribble path + path {
	stroke-width: 1.6;
	opacity: 0.7;
}

.agogo-reels .agogo-scribble {
	stroke: var(--wp--preset--color--peach);
}

h2:has(> em > .agogo-scribble) em {
	position: relative;
	display: inline-block;
}

.agogo-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.agogo-more::after {
	content: "→";
}

.agogo-header__nav .wp-block-navigation-item__content,
.agogo-footer__links a {
	background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px;
	background-origin: content-box;
}

@media (prefers-reduced-motion: no-preference) {
	.agogo-hero__image {
		animation: agogo-settle var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--out) both;
	}

	.agogo-hero__copy > * {
		animation: agogo-rise var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--out) backwards;
	}

	.agogo-hero__copy > :nth-child(2) {
		animation-delay: calc(var(--wp--custom--motion--stagger) * 1.5);
	}

	.agogo-hero__copy > :nth-child(3) {
		animation-delay: calc(var(--wp--custom--motion--stagger) * 3);
	}

	.agogo-hero__copy > :nth-child(4) {
		animation-delay: calc(var(--wp--custom--motion--stagger) * 4.5);
	}

	.agogo-btn {
		transition:
			background-color var(--wp--custom--motion--duration--fast) ease,
			color var(--wp--custom--motion--duration--fast) ease,
			scale var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--spring);
	}

	.agogo-btn:active {
		scale: 0.97;
	}

	.wp-site-blocks .agogo-cards .agogo-card__button .wc-block-components-product-button__button {
		transition:
			background-color var(--wp--custom--motion--duration--fast) ease,
			color var(--wp--custom--motion--duration--fast) ease,
			scale var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--spring);
	}

	.wp-site-blocks .agogo-cards .agogo-card__button .wc-block-components-product-button__button:active {
		scale: 0.97;
	}

	.agogo-btn:hover svg {
		animation: agogo-ring 0.6s var(--wp--custom--motion--ease--out);
	}

	.agogo-more::after {
		transition: translate var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--spring);
	}

	.agogo-more:hover::after {
		translate: 4px 0;
	}

	.agogo-header__nav .wp-block-navigation-item__content,
	.agogo-footer__links a {
		transition:
			color var(--wp--custom--motion--duration--fast) ease,
			background-size var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--out);
	}

	.agogo-sizes__item {
		transition:
			background-color var(--wp--custom--motion--duration--fast) ease,
			color var(--wp--custom--motion--duration--fast) ease,
			border-color var(--wp--custom--motion--duration--fast) ease,
			translate var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--ease--spring);
	}

	.agogo-duo__img,
	.agogo-top .agogo-hero__image {
		transition: scale var(--wp--custom--motion--duration--slow) var(--wp--custom--motion--ease--out);
	}

	.agogo-duo .agogo-hero__copy > * {
		animation: agogo-rise var(--wp--custom--motion--duration--base) var(--wp--custom--motion--ease--out) backwards;
	}

}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.agogo-duo__item:hover .agogo-duo__img,
	.agogo-top .agogo-hero__link:hover .agogo-hero__image {
		scale: var(--wp--custom--motion--hover-scale);
	}

	.agogo-header__nav .wp-block-navigation-item__content:hover,
	.agogo-footer__links a:hover {
		background-size: 100% 1px;
	}

	.agogo-sizes--home .agogo-sizes__item:hover {
		translate: 0 -3px;
	}

	.agogo-review.is-revealed:hover {
		translate: 0 -4px;
		transition-delay: 0s;
	}

	.agogo-perk:hover .agogo-perk__icon {
		animation: agogo-ring 0.6s var(--wp--custom--motion--ease--out);
	}
}

@keyframes agogo-settle {
	from {
		scale: 1.08;
	}
}

@keyframes agogo-rise {
	from {
		opacity: 0;
		translate: 0 var(--wp--custom--motion--distance);
	}
}

@keyframes agogo-ring {
	30% {
		rotate: -14deg;
	}

	60% {
		rotate: 10deg;
	}
}