/*
   Ajustes nossos, feitos depois do porte.
   Fica separado do CSS herdado (style.css e z-style.css) de proposito: assim da
   para saber o que e original do site e o que a gente mudou.

   Boa parte do que esta aqui conserta o mesmo tipo de coisa: o CSS herdado
   fixava so uma das dimensoes da foto e contava com a outra sair proporcional,
   o que funcionava porque o sistema antigo nao escrevia width e height na tag.
   O WordPress escreve, e esses atributos valem como medida de verdade.
*/

/* A foto de cada item da lista de desejos.
   O CSS herdado manda so a altura (60px) e conta com a largura sair
   proporcional. Isso funcionava porque o site antigo nao escrevia width na tag
   da foto; o WordPress escreve, e o atributo vira largura de verdade -- a foto
   saia com 500px de largura por 60 de altura, esticada por cima da linha.
   O caso contrario (largura fixa, altura do atributo) ja esta coberto pela
   regra global "img { height: auto }" la no style.css. */
#wishlist .wishlist-content .wishlist-list .wishlist-item .thumb img {
	width: auto;
}

/* O nome do produto na lista de desejos.
   No site atual ele e texto simples dentro de um <p>. Aqui virou link, para
   dar para voltar ao produto -- so que link sem cor definida herda o azul e o
   roxo de "ja visitado" do navegador, e a lista ficava colorida. Isto devolve a
   aparencia de texto, mantendo o clique. */
#wishlist .wishlist-content .wishlist-list .wishlist-item .info a,
#wishlist .wishlist-content .wishlist-list .wishlist-item .thumb a {
	color: inherit;
	text-decoration: none;
}

/* As fotos da grade de marcas e designers.
   O CSS herdado define so a largura, entao a altura acompanhava a proporcao de
   cada arquivo -- e das 50 fichas, 8 nao sao quadradas. O resultado era uma
   grade com celulas de alturas diferentes. Aqui o quadro e sempre quadrado e a
   foto preenche por recorte, nunca por deformacao. */
#designers .designers-content .designers-grid .designers-box a img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------------------------------------------------------------- produto */

/* O botao "Solicitar orcamento" alinhado com a base da foto.
   A coluna da direita passa a ter a altura da linha e vira uma coluna flex; o
   bloco do botao recebe margin-top automatico e desce ate o fim. Nada de altura
   fixa: cada produto tem foto de proporcao diferente, e a regra tem que valer
   para todas. */
#product .product-content {
	align-items: stretch;
}

/* A foto NAO estica: ela tem borda, e esticar desenharia a linha abaixo do fim
   da imagem. Fica na altura natural dela e e a coluna da direita que acompanha. */
#product .product-content .thumb {
	align-self: flex-start;
}

#product .product-content .details {
	display: flex;
	flex-direction: column;
}

/* Marca, Designer, orcamento e download descem juntos ate a base da foto.
   Todo o espaco que sobra na coluna fica ACIMA deles, logo depois das medidas.
   Como estao num container so, andam colados: nao ha vao entre a marca e o
   botao nem quando o produto nao tem designer. */
#product .product-content .details .rodape-info {
	margin-top: auto;
}

/* colados um no outro: o respiro grande vinha de um margin-bottom de 30px no
   link de cada bloco de marca/designer */
#product .product-content .details .designer a {
	margin-bottom: 6px;
}

/* um fio de ar antes do botao, so para nao encostar */
#product .product-content .details .rodape-info .acoes {
	margin-top: 12px;
}

/* No celular as colunas empilham e a foto deixa de ser referencia de altura --
   ai o bloco volta a seguir o texto, sem ser empurrado para baixo. */
@media (max-width: 768px) {
	#product .product-content .details .rodape-info {
		margin-top: 24px;
	}
}

/* Os downloads (3D, 2D, acabamentos) na coluna de informacoes.
   Antes eram tres circulos cinza no fim da pagina, depois da galeria. Agora sao
   acoes secundarias logo abaixo do "Solicitar orcamento": contorno em vez de
   preenchimento, para nao competir com o botao principal. */
#product .product-content .details .downloads-produto {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* Contorno na cor do lado do site, nao cinza: o 3D e o que a arquitetura mais
   procura na pagina, entao pesa mais que um link discreto -- mas segue vazado,
   para o "Solicitar orcamento" continuar sendo o botao principal. */
#product .product-content .details .downloads-produto a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 26px;
	border: 1.5px solid #A7471C;
	color: #A7471C;
	font-family: upgrade-lights, sans-serif;
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-decoration: none;
	background: none;
	transition: .25s;
}

#product .product-content .details .downloads-produto a svg {
	height: 22px;
	width: 22px;
	flex: none;
}

#product .product-content .details .downloads-produto a:hover {
	background: #A7471C;
	color: #fff;
}

body.corporativo #product .product-content .details .downloads-produto a {
	border-color: #2669c2;
	color: #2669c2;
}

/* A letra branca precisa ser repetida aqui, e nao herdada da regra de cima.
   A regra "body.corporativo ... a" pinta a letra de azul e, por levar um
   seletor a mais (o body), pesa MAIS que "#product ... a:hover", que a pintaria
   de branco. No Office o fundo virava azul e a letra continuava azul: o botao
   ficava um retangulo cheio, sem texto e sem icone -- o icone tambem some,
   porque ele acompanha a cor da letra de proposito. */
body.corporativo #product .product-content .details .downloads-produto a:hover {
	background: #2669c2;
	color: #fff;
}

/* O respiro que a secao de downloads dava no fim da pagina.
   Ela tinha 60px de padding e ficava entre a galeria e o rodape; sem ela, a
   ultima foto encostava no fim. */
#product-gallery {
	padding-bottom: 60px;
}

/* "Marca: Estudiobola" numa linha so.
   O rotulo em negrito, o nome ao lado. O CSS herdado deixa o link como
   inline-block, o que basta -- so o espaco entre as duas linhas muda. */
#product .product-content .details .rodape-info .designer a {
	display: block;
	line-height: 1.6;
}

#product .product-content .details .rodape-info .designer a b {
	font-weight: 600 !important;
}

/* As fotos complementares, abaixo do produto.
   Duas coisas: elas vinham de tamanhos diferentes -- a mesma galeria com foto
   deitada (600x400) e em pe (400x600) -- e ficavam encostadas umas nas outras.
   O tamanho da galeria e registrado sem recorte forcado, de proposito: assim o
   arquivo guardado preserva a foto inteira. Quem uniformiza e a vitrine, aqui,
   com um quadro fixo e recorte pelo centro. */
#product-gallery .gallery-items .item {
	display: block;
}

#product-gallery .gallery-items .item img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #fafafa;
}

/* o respiro entre uma foto e outra.
   O carrossel (slick) envolve cada foto num .slick-slide; o espaco vai nele, e
   a margem negativa na lista devolve a largura, para a primeira e a ultima
   continuarem alinhadas com o resto da pagina. */
#product-gallery .gallery-items .slick-list {
	margin: 0 -7px;
}

#product-gallery .gallery-items .slick-slide {
	padding: 0 7px;
}

/* ------------------------------------------------------------------ busca */

/* A lupa do cabecalho nao abria nada.
   O JavaScript poe a classe "active" no #search, e o CSS herdado deixa o
   #search com "display: none" -- so que a regra que o mostra de volta nao veio
   junto no porte. Clicar na lupa executava tudo certo e nao acontecia nada.
   O "flex" e o que o proprio #search ja espera: ele define align-items e
   justify-content, que sem flex nao valem nada. */
#search.active {
	display: flex;
}