/*
 * Camada fluida da Andreza Enxovais · design system Trama (01-MARCA/design-system), 29/10/2026
 *
 * Vai por cima do CSS do Elementor, sem trocar cor nem fonte: as cores vêm das variáveis do kit
 * (--e-global-color-*) e a Sora continua a mesma. O que muda é como o layout acompanha a tela:
 * - margem lateral que cresce com a tela, para nada encostar na borda (e sem rolagem para o lado);
 * - no desktop, as margens das páginas são as do topo: do logo à busca (--f-caixa);
 * - grade de produtos que ganha coluna quando cabe, em vez de pular em 767 e 1024 px;
 * - filtros que se arrumam lado a lado quando cabem;
 * - movimento só quando responde a um gesto, e nenhum com "reduzir movimento" ligado.
 * Os tamanhos de título e de espaço que pulavam estão no fluido-elementor.css, que o gerador
 * escreve a cada "Publicar site" (App\Site\Fluido). As micro-animações estão no trama.css.
 */

:root {
	/* espaço */
	--f-caixa: 990px;                                       /* desktop: do logo à busca, a largura do topo (era 1140) */
	--f-logo-topo: min(217px, 19vw);                        /* o bloco do logo no topo: os 19% da caixa antiga, para o logo não encolher com ela */
	--f-borda: clamp(14px, 0.62rem + 1.9vw, 40px);          /* margem lateral mínima até a borda da tela */
	--f-vao: clamp(10px, 0.45rem + 0.85vw, 20px);           /* vão entre cards e entre filtros */
	--f-card-produto: 150px;                                /* menor card de produto: 2 por linha num celular de 375 */
	--f-colunas-produto: 3;                                 /* o desktop de hoje: 3 por linha */
	/* dentro do card, medido pela largura do próprio card (cqi): num card de 280 px, os 30 px e os 18 px de hoje */
	--f-card-recuo: clamp(8px, 10.7cqi, 30px);
	--f-card-titulo: clamp(14px, 6.43cqi, 18px);
	--f-card-titulo-entrelinha: 1.22;                       /* os 22 px sobre 18 px de hoje */
	--f-card-detalhe: clamp(12px, 5.36cqi, 15px);
	/* a fileira de filtros com menos de 40rem dá linha própria ao "Filtre por:" (@container não lê variável) */
	--f-filtro: 9.5rem;                                     /* menor largura de Tamanhos e Cores antes de um ir para baixo do outro */
	--f-filtro-max: 13rem;                                  /* os 208 px de cada filtro no desktop de hoje */
	--f-tamanho-recuo: clamp(16px, 13.6cqi, 50px);          /* card de Tamanhos: os 50 px de hoje num card de 367 px */
	--f-tamanho-titulo: clamp(16px, 6cqi, 22px);            /* e os 22 px do nome do tamanho */
	--f-combina-min: 16rem;                                 /* "Complete sua coleção": menor card antes de cair para a linha de baixo */
	--f-combina-colunas: 3;

	/* foco do teclado: a cor do texto do kit, que passa de 3:1 sobre o branco e sobre o areia */
	--f-foco: #363636;                                       /* o texto do kit (--e-global-color-text), que no :root ainda não existe */
	--f-foco-largura: 2px;
	--f-foco-recuo: 3px;

	/* movimento */
	--f-curva: cubic-bezier(0.2, 0.7, 0.2, 1);              /* sai rápido e assenta devagar, como tecido caindo */
	--f-tempo-curto: 180ms;
	--f-tempo: 320ms;
	--f-tempo-longo: 620ms;
	--f-tempo-banner: 900ms;                                /* a fusão de uma foto do banner para a outra */
	--f-passo: 30ms;                                        /* atraso entre um card e o próximo ao filtrar */
	--f-passo-max: 11;                                      /* a partir do 12º card, chegam todos juntos */
	--f-desliza: 10px;
}

/* ---------------------------------------------------------------- margem lateral */

/* A caixa de conteúdo nunca chega mais perto da borda da tela do que --f-borda. Medido pela tela
   (vw), e não pelo pai, para não somar com a margem que a seção já tem. */
html .e-con.e-parent.e-con-boxed > .e-con-inner {
	max-width: min(var(--content-width), 100vw - 2 * var(--f-borda));
}

/* No desktop, as margens das páginas são as do topo: o conteúdo começa onde começa o logo e termina
   onde termina a busca (Vinícius, 29/10/2026). O topo e as seções leem a mesma caixa (--f-caixa),
   então ficam alinhados em qualquer largura: o topo se abre até ela, com o logo encostado na margem
   esquerda e a busca na direita, e cada seção em caixa do Elementor fica dentro dela. */
@media (min-width: 1025px) {
	html .e-con {
		--container-max-width: var(--f-caixa); /* o kit do Elementor (post-9.css) põe 1140px em cada .e-con */
	}
	html .elementor-51 .elementor-element.elementor-element-9ff62cc {
		--justify-content: space-between;
	}
	html .elementor-51 .elementor-element.elementor-element-9fbdef4 {
		--container-widget-width: var(--f-logo-topo);
		max-width: none;
		text-align: start;
	}

	/* O que ficava alguns px para dentro da caixa (quase sempre o recuo de 10 px que o Elementor põe
	   em cada bloco) encosta na margem. O vão entre os cards não muda. */

	/* Início · banner: a foto ocupa a caixa toda. */
	html .elementor-1801 .elementor-element.elementor-element-5c325fe {
		--padding-left: 0px;
		--padding-right: 0px;
	}
	/* Início e Catálogos · as capas dos catálogos: os 10 px de dentro de cada card saem para a margem,
	   e o vão entre as capas continua 40 px. Seletor comprido para vencer o do JetEngine. */
	html .elementor-element.elementor-widget.elementor-widget-jet-listing-grid > .jet-listing-grid > .jet-listing-grid__items.jet-listing-grid--185 {
		width: calc(100% + 40px);
		margin-inline: -20px;
	}
	/* Listas de produtos · as três coleções do topo: cada card ocupa 90% do seu terço, e a sobra de
	   fora (5% de um terço, de cada lado) sai para a margem. A fileira cresce 1/58 de cada lado. */
	html .elementor-element.elementor-widget.elementor-widget-jet-listing-grid > .jet-listing-grid > .jet-listing-grid__items.jet-listing-grid--375 {
		width: calc(100% + 200% / 58);
		margin-inline: calc(-100% / 58);
	}
	html .elementor-307 .elementor-element.elementor-element-ed6e37a,   /* Tecidos, Estilo, Composição, Linha, Categorias */
	html .elementor-769 .elementor-element.elementor-element-0f8906a {  /* Busca */
		--padding-left: 0px;
		--padding-right: 0px;
	}
	/* Listas de produtos · a coluna de Tamanhos e Cores começa na margem, e a grade termina nela. */
	html .elementor-610 .elementor-element.elementor-element-7687db3,   /* Produtos */
	html .elementor-290 .elementor-element.elementor-element-062373c,   /* Coleções */
	html .elementor-307 .elementor-element.elementor-element-a7c2c9d,
	html .elementor-769 .elementor-element.elementor-element-fb2acdd {
		--padding-left: 0px;
	}
	html .elementor-307 .elementor-element.elementor-element-203bfd2 > .elementor-widget-container,
	html .elementor-307 .elementor-element.elementor-element-f9fb02f > .elementor-widget-container,
	html .elementor-769 .elementor-element.elementor-element-f263086 > .elementor-widget-container,
	html .elementor-769 .elementor-element.elementor-element-f0403ff > .elementor-widget-container {
		padding-left: 0;
	}
	html .elementor-610 .elementor-element.elementor-element-1fa7ca3,
	html .elementor-290 .elementor-element.elementor-element-28c77cf {
		--padding-right: 0px;
	}
	/* Rodapé · as colunas e a linha de baixo vão de uma margem à outra; o logo e os selos ficam à
	   esquerda, na mesma linha do logo do topo. */
	html .elementor-18 .elementor-element.elementor-element-9cb8e8e {
		--justify-content: space-between;
	}
	html .elementor-18 .elementor-element.elementor-element-e235b01 {
		--justify-content: flex-start;
		--padding-left: 0px;
	}
	html .elementor-18 .elementor-element.elementor-element-6715963 {
		text-align: start;
	}
	html .elementor-18 .elementor-element.elementor-element-6715963 img {
		margin-left: calc(-100% * 21 / 357); /* o logo-branco.png tem 21 px de sobra à esquerda, em 357 */
	}
}

/* ---------------------------------------------------------------- grade de produtos */

/* Era flex com 1, 2 ou 3 colunas fixas por faixa. Agora: tantas colunas quantas couberem com
   pelo menos --f-card-produto, até as 3 do desktop. O espaço entre os cards continua o do
   JetEngine (o padding de cada item), então as pontas ficam como estão. */
html .jet-listing-grid__items.jet-listing-grid--300:not(.slick-slider) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--f-card-produto), 100% / var(--f-colunas-produto)), 1fr));
}
html .jet-listing-grid__items.jet-listing-grid--300:not(.slick-slider) > .jet-listing-grid__item {
	width: auto;
	max-width: none;
}
html .jet-listing-grid__items.jet-listing-grid--300 > .jet-listing-not-found {
	grid-column: 1 / -1;
}

/* O texto do card acompanha o card: com 2 por linha no celular, o nome não quebra palavra por palavra. */
.jet-listing-grid--300 > .jet-listing-grid__item,
.jet-listing-grid--276 > .jet-listing-grid__item {
	container-type: inline-size;
}
html .elementor-300 .elementor-element.elementor-element-6b10d55,
html .elementor-300 .elementor-element.elementor-element-cfdf81e {
	padding-inline: var(--f-card-recuo);
}
html .elementor-300 .elementor-element.elementor-element-6b10d55 .elementor-heading-title {
	font-size: var(--f-card-titulo);
	line-height: var(--f-card-titulo-entrelinha);
}
html .elementor-300 .elementor-element.elementor-element-cfdf81e .elementor-heading-title {
	font-size: var(--f-card-detalhe);
}

/* Página do produto · Tamanhos: o recuo de 50 px encolhe junto com o card, e o texto ganha espaço no tablet. */
html .elementor-276 .elementor-element.elementor-element-5297e68 {
	--padding-left: var(--f-tamanho-recuo);
	--padding-right: var(--f-tamanho-recuo);
}
html .elementor-276 .elementor-element.elementor-element-011b44a .jet-listing-dynamic-field__content {
	font-size: var(--f-tamanho-titulo);
}

/* Página do produto · Complete sua coleção: ganha coluna quando cabe, até as 3 de hoje (no tablet, 2 em vez de 3 apertados). */
html .jet-listing-grid__items.jet-listing-grid--826:not(.slick-slider) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(var(--f-combina-min), 100% / var(--f-combina-colunas)), 1fr));
}
html .jet-listing-grid__items.jet-listing-grid--826:not(.slick-slider) > .jet-listing-grid__item {
	width: auto;
	max-width: none;
}

/* ---------------------------------------------------------------- filtros */

/* Produto, Tecidos, Estilo e Composição: dois estados, e nunca um filtro sozinho na linha de baixo.
   Fileira estreita: "Filtre por:" em cima e os quatro em 2×2. Com 44rem ou mais: tudo numa linha só,
   como no desktop de hoje. O estado é decidido pela largura da própria seção (@container), não da tela. */
html .e-con.e-parent:has(> .e-con-inner > .elementor-widget-jet-smart-filters-select) {
	container-type: inline-size;
}
html .e-con.e-parent > .e-con-inner:has(> .elementor-widget-jet-smart-filters-select) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	justify-content: center;
	align-items: center;
	gap: var(--f-vao);
}
html .e-con-inner > .elementor-element.elementor-widget-jet-smart-filters-select {
	--container-widget-width: auto;
	width: auto;
	max-width: none;
}
html .e-con-inner > .elementor-element.elementor-widget-heading:has(+ .elementor-widget-jet-smart-filters-select) {
	--container-widget-width: auto;
	width: auto;
	grid-column: 1 / -1;
	white-space: nowrap;
}
@container (min-width: 44rem) {
	html .e-con.e-parent > .e-con-inner:has(> .elementor-widget-jet-smart-filters-select) {
		grid-template-columns: auto repeat(4, minmax(0, var(--f-filtro-max)));
	}
	html .e-con-inner > .elementor-element.elementor-widget-heading:has(+ .elementor-widget-jet-smart-filters-select) {
		grid-column: auto;
	}
}
/* No desktop, a fileira vai de uma margem à outra, com quatro filtros ou com três (Tecidos, Busca). */
@media (min-width: 1025px) {
	html .e-con.e-parent > .e-con-inner:has(> .elementor-widget-jet-smart-filters-select) {
		grid-template-columns: auto;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}
	/* cada filtro ocupa a sua coluna inteira (o Elementor travava em 208 px) */
	html .e-con.e-parent > .e-con-inner > .elementor-element.elementor-widget-jet-smart-filters-select .jet-smart-filters-select.jet-filter .jet-select {
		max-width: none;
		flex-basis: auto;
	}
}

/* Tamanhos e Cores: um ao lado do outro no celular; na coluna estreita do desktop, um embaixo do outro, como hoje. */
html .e-con.e-con-full:has(> .elementor-widget-jet-smart-filters-checkboxes) {
	--flex-direction: row;
	--flex-wrap: wrap;
	--align-content: flex-start;
	--align-items: flex-start;
	--row-gap: var(--f-vao);
	--column-gap: var(--f-vao);
}
html .e-con > .elementor-element.elementor-widget-jet-smart-filters-checkboxes {
	flex: 1 1 var(--f-filtro);
}

/* ---------------------------------------------------------------- texto */

/* Título sem palavra sozinha na última linha ("casa" no tablet); parágrafo sem viúva. */
/* text-wrap-style, e não o atalho text-wrap: o atalho religa a quebra onde o Elementor pediu nowrap. */
.elementor-heading-title {
	text-wrap-style: balance;
}
.elementor-widget-text-editor p {
	text-wrap-style: pretty;
}

/* ---------------------------------------------------------------- foco do teclado */

:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
	outline: var(--f-foco-largura) solid var(--f-foco);
	outline-offset: var(--f-foco-recuo);
}

/* ---------------------------------------------------------------- movimento */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Trocar de página sem a tela piscar: o cabeçalho e o WhatsApp ficam parados, o resto passa
	   por fusão, e a foto do card tocado vira a foto do produto (fluido.js dá o nome à foto). */
	@view-transition {
		navigation: auto;
	}
	header.elementor-location-header {
		view-transition-name: cabecalho;
	}
	.ht-ctc {
		view-transition-name: whatsapp;
	}
	.elementor-widget-jet-woo-product-gallery-slider:not(.elementor-hidden-desktop) .jet-woo-product-gallery-slider {
		view-transition-name: foto-produto;
	}
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: var(--f-tempo);
		animation-timing-function: var(--f-curva);
	}
	::view-transition-group(foto-produto) {
		animation-duration: var(--f-tempo-longo);
		animation-timing-function: var(--f-curva);
	}

	/* Ao filtrar ou trocar de página da lista, os cards novos chegam um atrás do outro. */
	.jet-listing-grid--300 > .jet-listing-grid__item.f-chega {
		animation: f-chega var(--f-tempo-longo) var(--f-curva) both;
		animation-delay: calc(min(var(--f-i, 0), var(--f-passo-max)) * var(--f-passo));
	}
	@keyframes f-chega {
		from {
			opacity: 0;
			transform: translateY(var(--f-desliza));
		}
	}

	/* A foto do card com o mouse em cima: no trama.css (v1.1, 3% e mais devagar). */
}