/*
 * Trama v1.1 · micro-animações e menu do celular (01-MARCA/design-system/ds-andreza.html, 29/10/2026)
 *
 * Por cima do Elementor e do fluido.css, sem cor nem fonte nova: os valores vêm do DS.
 * O vocabulário é o das casas de enxoval: a curva longa que assenta sem quicar, o fio que se
 * desenha, o brilho que passa uma vez. Tudo responde a um gesto, e nada se mexe com
 * "reduzir movimento" ligado no aparelho.
 * Fica de fora nesta versão (decisão do Vinícius, 29/10): o areia escuro no texto pequeno e as texturas.
 */

:root {
	/* cor · da marca, com os valores do DS (as variáveis do kit do Elementor só existem dentro do body) */
	--areia: #A69F88;
	--areia-escuro: #746D59;
	--areia-linha: #B8B3A1;
	--creme-claro: #FFFDF7;
	--nevoa: #F8F8F8;
	--branco: #FFFFFF;
	--texto: #363636;
	--cinza-titulo: #7A7A7A;
	--cinza-forte: #5C5C5C;

	/* forma · da marca */
	--linha: 1px;
	--barra-titulo: 4px;
	--raio-foto: 10px;
	--raio-pilula: 50px;
	--e-1: 4px;
	--e-2: 8px;
	--e-3: 12px;
	--e-4: 16px;
	--e-5: 24px;

	/* micro-animações */
	--f-curva-lenta: cubic-bezier(0.16, 1, 0.3, 1);
	--f-tempo-fio: 600ms;
	--f-tempo-lento: 1100ms;
	--f-zoom-lento: 1.03;
	--f-anda: 2px;
	--f-sobe: 14px;
	--faixa-cresce: 1.6;                                    /* a faixa do card de produto: de 25% para 40% */
	--faixa-colecao-cresce: 1.4;
	--brilho: color-mix(in srgb, var(--branco) 30%, transparent);

	/* menu do celular */
	--menu-largura: min(88vw, 420px);
	--menu-link: clamp(26px, 22px + 1vw, 30px);
	--menu-linha-alta: 56px;
	--menu-veu: color-mix(in srgb, var(--texto) 42%, transparent);
	--menu-rotulo: 12px;
	--menu-colecao: 13px;
	--menu-whats: 15px;
	--menu-busca: 14px;
	--f-passo-menu: 45ms;
	--f-espera-menu: 140ms;
	--f-espera-fio: 80ms;
	--toque: 48px;
	--linhas-largura: 22px;
	--linhas-altura: 14px;
	--linhas-espessura: 1.5px;
	--camada-menu: 9990;
}

/* ================================================================ estados parados (valem sempre) */

/* filtro: a seta do Tamanhos e Cores é uma só, que gira ao abrir */
html .jet-filter-items-dropdown .jet-filter-items-dropdown__label::after {
	border-width: 5px 5px 0 5px;
	border-color: currentColor transparent transparent transparent;
}
html .jet-filter-items-dropdown.jet-dropdown-open .jet-filter-items-dropdown__label::after {
	rotate: 180deg;
}

/* marcação: o visto aparece crescendo do centro */
html .jet-checkboxes-list__checked-icon {
	scale: 0;
}
html .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__checked-icon {
	scale: 1;
}

/* ================================================================ micro-animações */

@media (prefers-reduced-motion: no-preference) {

	/* link: o fio de baixo se desenha da esquerda e sai pela direita */
	.elementor-location-footer .elementor-icon-list-item > a .elementor-icon-list-text,
	.elementor-widget-text-editor a {
		text-decoration: none;
		background:
			linear-gradient(currentColor, currentColor) 100% 100% / 0 var(--linha) no-repeat,
			linear-gradient(color-mix(in srgb, currentColor 28%, transparent), color-mix(in srgb, currentColor 28%, transparent)) 0 100% / 100% var(--linha) no-repeat;
		padding-bottom: 2px;
		transition: background-size var(--f-tempo-fio) var(--f-curva-lenta);
	}
	.elementor-location-footer .elementor-icon-list-item > a:is(:hover, :focus-visible) .elementor-icon-list-text,
	.elementor-widget-text-editor a:is(:hover, :focus-visible) {
		background-size: 100% var(--linha), 100% var(--linha);
		background-position: 0 100%, 0 100%;
	}

	/* botão: escurece devagar, um brilho passa uma vez, afunda 2% ao apertar */
	html .elementor-button {
		position: relative;
		overflow: hidden;
		isolation: isolate;
		transition: background-color var(--f-tempo-longo) var(--f-curva-lenta), color var(--f-tempo-longo) var(--f-curva-lenta), transform var(--f-tempo-curto) var(--f-curva);
	}
	html .elementor-button::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(105deg, transparent 35%, var(--brilho) 50%, transparent 65%);
		transform: translateX(-130%);
		transition: transform var(--f-tempo-lento) var(--f-curva-lenta);
	}
	html .elementor-button:is(:hover, :focus-visible)::before {
		transform: translateX(130%);
	}
	html .elementor-button:active {
		transform: scale(0.98);
	}

	@media (hover: hover) {
		/* card de produto e de coleção: a foto se aproxima, a faixa da marca cresce, o nome escurece */
		.jet-listing-grid--300 .elementor-widget-image,
		.jet-listing-grid--321 .elementor-widget-image,
		.jet-listing-grid--375 .elementor-widget-image {
			overflow: hidden;
		}
		.jet-listing-grid--300 .elementor-widget-image img,
		.jet-listing-grid--321 .elementor-widget-image img,
		.jet-listing-grid--375 .elementor-widget-image img {
			transition: transform var(--f-tempo-lento) var(--f-curva-lenta);
		}
		:is(.jet-listing-grid--300, .jet-listing-grid--321, .jet-listing-grid--375) > .jet-listing-grid__item:is(:hover, :focus-within) .elementor-widget-image img {
			transform: scale(var(--f-zoom-lento));
		}
		html .elementor-300 .elementor-element-89e9d14 .elementor-divider-separator,
		html .elementor-321 .elementor-element-3c9aa22 .elementor-divider-separator {
			transition: width var(--f-tempo-fio) var(--f-curva-lenta);
		}
		html .jet-listing-grid__item:is(:hover, :focus-within) .elementor-300 .elementor-element-89e9d14 .elementor-divider-separator {
			width: calc(25% * var(--faixa-cresce));
		}
		html .jet-listing-grid__item:is(:hover, :focus-within) .elementor-321 .elementor-element-3c9aa22 .elementor-divider-separator {
			width: calc(25% * var(--faixa-colecao-cresce));
		}
		html .elementor-300 .elementor-element-6b10d55 .elementor-heading-title {
			transition: color var(--f-tempo-fio) var(--f-curva-lenta);
		}
		html .jet-listing-grid__item:is(:hover, :focus-within) .elementor-300 .elementor-element-6b10d55 .elementor-heading-title {
			color: var(--areia-escuro);
		}

		/* ícone das redes: o areia sobe de baixo e o ícone fica branco */
		html .elementor-social-icon {
			position: relative;
			overflow: hidden;
			isolation: isolate;
		}
		html .elementor-social-icon::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background: var(--areia);
			transform: translateY(101%);
			transition: transform var(--f-tempo-longo) var(--f-curva-lenta);
		}
		html .elementor-social-icon svg {
			transition: fill var(--f-tempo) var(--f-curva-lenta);
		}
		html .elementor-social-icon:is(:hover, :focus-visible)::before {
			transform: translateY(0);
		}
		html .elementor-social-icon:is(:hover, :focus-visible) svg {
			fill: var(--branco);
		}

		/* setas: andam 2 px para o lado que apontam */
		.jet-listing-grid__slider-icon svg {
			transition: translate var(--f-tempo) var(--f-curva-lenta);
		}
		.jet-listing-grid__slider-icon.prev-arrow:hover svg {
			translate: calc(-1 * var(--f-anda)) 0;
		}
		.jet-listing-grid__slider-icon.next-arrow:hover svg {
			translate: var(--f-anda) 0;
		}
	}

	/* filtro: a seta gira e a lista desce se revelando */
	html .jet-filter-items-dropdown .jet-filter-items-dropdown__label::after {
		transition: rotate var(--f-tempo) var(--f-curva-lenta);
	}
	.jet-filter-items-dropdown.jet-dropdown-open .jet-filter-items-dropdown__body {
		animation: trama-desce var(--f-tempo) var(--f-curva-lenta) both;
	}
	@keyframes trama-desce {
		from {
			opacity: 0;
			transform: translateY(calc(-2 * var(--f-anda)));
			clip-path: inset(0 0 100% 0);
		}
		to {
			clip-path: inset(0);
		}
	}

	/* marcação: o visto cresce do centro */
	html .jet-checkboxes-list__checked-icon {
		transition: scale var(--f-tempo) var(--f-curva-lenta), opacity var(--f-tempo-curto) var(--f-curva);
	}

	/* acordeão: o + gira e vira − ao abrir */
	details[open] > summary .e-n-accordion-item-title-icon .e-opened svg {
		animation: trama-gira var(--f-tempo) var(--f-curva-lenta);
	}
	@keyframes trama-gira {
		from {
			rotate: -90deg;
		}
	}

	/* faixa das seções: se desenha uma vez, quando a seção chega (trama.js marca as que estão abaixo da dobra) */
	.trama-faixa .elementor-divider-separator {
		transform-origin: left;
		transition: transform var(--f-tempo-lento) var(--f-curva-lenta);
	}
	.trama-faixa:not(.visto) .elementor-divider-separator {
		transform: scaleX(0);
	}
}

/* ================================================================ menu do celular */

/* o hambúrguer que vira X (no lugar do ícone do Elementor, no cabeçalho do celular) */
html .elementor-icon.tm-botao {
	width: var(--toque);
	height: var(--toque);
	display: inline-grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	border-radius: 50%;
}
.tm-linhas {
	position: relative;
	width: var(--linhas-largura);
	height: var(--linhas-altura);
}
.tm-linhas span {
	position: absolute;
	left: 0;
	right: 0;
	height: var(--linhas-espessura);
	background: currentColor;
	border-radius: var(--linhas-espessura);
}
.tm-linhas span:nth-child(1) {
	top: 0;
}
.tm-linhas span:nth-child(2) {
	top: calc(50% - var(--linhas-espessura) / 2);
	width: 70%;
	left: auto;
}
.tm-linhas span:nth-child(3) {
	bottom: 0;
}
.tm-botao[aria-expanded="true"] .tm-linhas span:nth-child(1) {
	transform: translateY(calc((var(--linhas-altura) - var(--linhas-espessura)) / 2)) rotate(45deg);
}
.tm-botao[aria-expanded="true"] .tm-linhas span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}
.tm-botao[aria-expanded="true"] .tm-linhas span:nth-child(3) {
	transform: translateY(calc((var(--linhas-altura) - var(--linhas-espessura)) / -2)) rotate(-45deg);
}

/* no tablet o hambúrguer é o do Elementor: só o ícone troca, e a lista antiga dele não abre mais */
html .elementor-menu-toggle.tm-ativo .elementor-menu-toggle__icon--open,
html .elementor-menu-toggle:not(.tm-ativo) .elementor-menu-toggle__icon--close {
	display: none;
}
html .elementor-menu-toggle.tm-ativo .elementor-menu-toggle__icon--close {
	display: block;
}
html .elementor-menu-toggle + .elementor-nav-menu--dropdown {
	display: none;
}

/* a folha entra pela direita, por baixo do cabeçalho (trama.js mede onde ele termina) */
.tm-veu {
	position: fixed;
	inset: var(--menu-topo, 0px) 0 0 0;
	z-index: var(--camada-menu);
	background: var(--menu-veu);
	opacity: 0;
	visibility: hidden;
}
.tm-folha {
	position: fixed;
	top: var(--menu-topo, 0px);
	right: 0;
	bottom: 0;
	z-index: calc(var(--camada-menu) + 1);
	width: var(--menu-largura);
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--e-5) var(--e-5) calc(var(--e-5) + env(safe-area-inset-bottom));
	background: var(--creme-claro);
	box-shadow: -32px 0 64px -40px color-mix(in srgb, var(--areia-escuro) 60%, transparent);
	font-family: "Sora", sans-serif;
	transform: translateX(100%);
	visibility: hidden;
}
.tm-menu[data-aberto="true"] .tm-veu {
	opacity: 1;
	visibility: visible;
}
.tm-menu[data-aberto="true"] .tm-folha {
	transform: none;
	visibility: visible;
}
html.tm-sem-rolagem {
	overflow: hidden;
}
html.tm-sem-rolagem .ht-ctc {
	visibility: hidden; /* o WhatsApp está no pé da folha, na zona do polegar */
}

.tm-busca {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	min-height: var(--toque);
	padding-inline: var(--e-4) var(--e-1);
	border: var(--linha) solid var(--areia-linha);
	border-radius: var(--raio-pilula);
	background: var(--branco);
}
.tm-busca input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0;
	background: none;
	font: inherit;
	font-size: var(--menu-busca);
	color: var(--texto);
}
.tm-busca input:focus {
	outline: none;
}
.tm-busca:focus-within {
	outline: var(--f-foco-largura) solid var(--f-foco);
	outline-offset: var(--f-foco-recuo);
}
.tm-busca button {
	width: var(--toque);
	height: calc(var(--toque) - 2 * var(--linha));
	display: grid;
	place-items: center;
	border: 0;
	padding: 0;
	background: none;
	color: var(--areia-escuro);
	cursor: pointer;
}
.tm-busca svg,
.tm-whats svg,
.tm-redes svg {
	width: var(--e-4);
	height: var(--e-4);
	fill: currentColor;
}

.tm-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tm-links a {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--e-3);
	min-height: var(--menu-linha-alta);
	font-size: var(--menu-link);
	font-weight: 300;
	line-height: 1.1;
	color: var(--texto);
	text-decoration: none;
}
.tm-links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--linha);
	background: var(--areia-linha);
	transform: scaleX(0);
	transform-origin: left;
}
.tm-menu[data-aberto="true"] .tm-links a::after {
	transform: scaleX(1);
}
.tm-links a::before {
	content: "";
	width: 0;
	height: var(--barra-titulo);
	background: var(--areia);
}
.tm-links a:hover {
	color: var(--areia-escuro);
}
.tm-links a:hover::before {
	width: var(--e-3);
}
.tm-links a[aria-current="page"] {
	font-weight: 400;
}
.tm-links a[aria-current="page"]::before {
	width: var(--e-5);
}

.tm-rotulo {
	margin: 0;
	font-size: var(--menu-rotulo);
	font-weight: 500;
	color: var(--cinza-forte);
	letter-spacing: 0.02em;
}
.tm-colecoes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--e-3);
}
.tm-colecoes a {
	display: grid;
	gap: var(--e-2);
	font-size: var(--menu-colecao);
	color: var(--texto);
	text-decoration: none;
}
.tm-colecoes .tm-foto {
	overflow: hidden;
	border-radius: var(--raio-foto);
}
.tm-colecoes img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.tm-pe {
	margin-top: auto;
	display: grid;
	gap: var(--e-4);
	padding-top: var(--e-4);
}
.tm-whats {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: var(--toque);
	border-radius: var(--raio-pilula);
	background: var(--areia-escuro);
	color: var(--branco);
	font-size: var(--menu-whats);
	font-weight: 500;
	text-decoration: none;
}
.tm-whats:hover,
.tm-whats:focus {
	color: var(--branco);
}
.tm-redes {
	display: flex;
	gap: var(--e-3);
	justify-content: center;
}
.tm-redes a {
	width: var(--toque);
	height: var(--toque);
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--areia);
}
.tm-redes a:hover {
	color: var(--areia-escuro);
}

@media (min-width: 1025px) {
	.tm-menu {
		display: none; /* no desktop o menu é o de sempre */
	}
}

@media (prefers-reduced-motion: no-preference) {
	.tm-botao {
		transition: background var(--f-tempo) var(--f-curva-lenta);
	}
	.tm-botao:hover {
		background: var(--nevoa);
	}
	.tm-linhas span {
		transition: transform var(--f-tempo) var(--f-curva-lenta), opacity var(--f-tempo-curto) var(--f-curva), width var(--f-tempo) var(--f-curva-lenta);
	}
	.tm-botao:hover .tm-linhas span:nth-child(2) {
		width: 100%;
	}

	.tm-veu {
		transition: opacity var(--f-tempo-longo) var(--f-curva-lenta), visibility 0s linear var(--f-tempo-longo);
	}
	.tm-folha {
		transition: transform var(--f-tempo-longo) var(--f-curva-lenta), visibility 0s linear var(--f-tempo-longo);
	}
	.tm-menu[data-aberto="true"] .tm-veu {
		transition: opacity var(--f-tempo-longo) var(--f-curva-lenta), visibility 0s;
	}
	.tm-menu[data-aberto="true"] .tm-folha {
		transition: transform var(--f-tempo-longo) var(--f-curva-lenta), visibility 0s;
	}

	/* os itens chegam um atrás do outro e o fio embaixo de cada link se desenha */
	.tm-item {
		opacity: 0;
		transform: translateX(var(--f-sobe));
		transition: opacity var(--f-tempo-fio) var(--f-curva-lenta), transform var(--f-tempo-fio) var(--f-curva-lenta);
	}
	.tm-menu[data-aberto="true"] .tm-item {
		opacity: 1;
		transform: none;
		transition-duration: var(--f-tempo-longo);
		transition-delay: calc(var(--f-espera-menu) + var(--i, 0) * var(--f-passo-menu));
	}
	.tm-links a {
		transition: color var(--f-tempo) var(--f-curva-lenta);
	}
	.tm-links a::after {
		transition: transform var(--f-tempo-fio) var(--f-curva-lenta);
	}
	.tm-menu[data-aberto="true"] .tm-links a::after {
		transition-duration: var(--f-tempo-lento);
		transition-delay: calc(var(--f-espera-menu) + var(--f-espera-fio) + var(--i, 0) * var(--f-passo-menu));
	}
	.tm-links a::before {
		transition: width var(--f-tempo-fio) var(--f-curva-lenta);
	}
	.tm-colecoes img {
		transition: transform var(--f-tempo-lento) var(--f-curva-lenta);
	}
	.tm-colecoes a:hover img {
		transform: scale(var(--f-zoom-lento));
	}
	.tm-whats::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(105deg, transparent 35%, var(--brilho) 50%, transparent 65%);
		transform: translateX(-130%);
		transition: transform var(--f-tempo-lento) var(--f-curva-lenta);
	}
	.tm-whats:hover::before {
		transform: translateX(130%);
	}
}