/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


/* ===== Largura total em páginas Elementor (full width / header-footer) =====
   O WoodMart envolve o conteúdo em .wd-content-layout.container com
   width: clamp(1222px,95%,100%) — isso limitava containers "largura total"
   do Elementor a ~1192px. Expandimos o wrapper nessas páginas. */
body.page-template-elementor_full_width .wd-content-layout.content-layout-wrapper.container,
body.page-template-elementor_header_footer .wd-content-layout.content-layout-wrapper.container,
body.page-id-18 .wd-content-layout.content-layout-wrapper.container {
	max-width: 100%;
	padding-inline: 0;
}


/* ===== Vídeo de fundo (containers Elementor): cobrir o container inteiro, centralizado =====
   O Elementor calcula o box do vídeo assumindo 16:9 — vídeos com outro
   aspect ratio (ex.: 1688x720 panorâmico) ficam ampliados/cortados.
   Width/height 100% + object-fit: cover = cobre sem distorcer, centralizado. */
.e-con .elementor-background-video-container video.elementor-background-video-hosted {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	inset-block-start: 50% !important;
	inset-inline-start: 50% !important;
	transform: translate(-50%, -50%) !important;
}

/* ===== Containers boxed (encaixotados) do Elementor: respeitar o width =====
   O WoodMart aplica wd-negative-gap nos containers e o CSS dele anula o
   --container-max-width (none) — containers boxed SEM largura custom ficavam
   full width. Restauramos o default do Site Settings (1200px); containers com
   "Largura" custom (boxed_width) continuam usando o valor próprio. */
.e-con-boxed.wd-negative-gap {
	--container-max-width: 1200px !important;
}

/* ===== Fotos na proporção real (sem corte), com limite de altura ===== */
/* Grade de produtos: woocommerce_thumbnail agora é gerado sem crop; aqui
   limitamos a altura para fotos muito verticais/panorâmicas não dominarem a linha. */
.product-grid-item .product-element-top img,
.product-grid-item .product-thumb img,
.product-grid-item img.attachment-woocommerce_thumbnail {
	width: 100%;
	height: auto;
	max-height: 200px;
	object-fit: contain;
	object-position: center;
}

/* Mobile: altura ainda menor */
@media (max-width: 767px) {
	.product-grid-item .product-element-top img,
	.product-grid-item .product-thumb img,
	.product-grid-item img.attachment-woocommerce_thumbnail {
		max-height: 130px;
	}
}

/* Galeria do produto: imagem principal na proporção real, altura limitada. */
.woocommerce-product-gallery .wp-post-image,
.woocommerce-product-gallery .wd-carousel-item img,
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: auto;
	height: auto;
	max-height: 720px;
	max-width: 100%;
	object-fit: contain;
	margin-inline: auto;
}

/* ===== Thumbs da galeria na proporção real de cada imagem ===== */
/* O WoodMart força um box fixo (~122x62, ratio ~1.96) com object-fit:cover,
   decepando fotos 1:1 e alterando a proporção. Aqui o thumb acompanha a
   proporção real da imagem (capa panorâmica aparece panorâmica; 1:1 quadrada). */
.woocommerce-product-gallery .wd-carousel-item {
	height: auto !important;
}
.woocommerce-product-gallery .wd-carousel-item img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain;
}

/* ===== Coluna de thumbs: 100% da altura da galeria ===== */
/* Sem isso a coluna acompanha a altura da foto atual (fica baixa em fotos
   panorâmicas). Com 100% ela preenche a galeria inteira e padroniza. */
.woocommerce-product-gallery .wd-gallery-thumb {
	height: auto !important;
	align-self: stretch;
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	height: auto !important;
}
.woocommerce-product-gallery .wd-gallery-thumb .wd-carousel {
	height: 100% !important;
}

/* ===== Centralização do link "Ver carrinho" (added_to_cart) em Loops e Elementor ===== */
.added_to_cart,
a.added_to_cart,
.elementor .added_to_cart,
.elementor a.added_to_cart,
.e-loop-item .added_to_cart,
.elementor-loop-container .added_to_cart,
.elementor-widget-woocommerce-product-add-to-cart .added_to_cart,
.elementor-widget-woocommerce-product-add-to-cart a.added_to_cart,
.e-loop-add-to-cart-form-container .added_to_cart,
.e-loop-add-to-cart-form-container a.added_to_cart,
.product-grid-item .added_to_cart,
.product .added_to_cart,
.wd-product .added_to_cart {
	display: block !important;
	text-align: center !important;
	margin-top: 8px !important;
	margin-bottom: 4px !important;
	margin-inline: auto !important;
	align-self: center !important;
	justify-self: center !important;
	width: 100% !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	clear: both !important;
}

/* ===== Carrossel de avaliações: respiro em todos os lados dos cards ===== */
/* O swiper tem overflow:hidden — o corte (clipping) acontece na borda do
   padding box. Com padding nos 4 lados, a borda/sombra dos cards (inclusive
   topo/base) fica DENTRO do container e não é cortada. O corte lateral dos
   slides vizinhos (comportamento normal do carrossel) é preservado.
   ⚠️ overflow-y:visible + overflow-x:hidden NÃO funciona (CSS força visible→auto,
   criando scrollbar). A solução é o padding, não o overflow.
   Se duplicar o carrossel em outra página, adicionar a classe cagr-carousel-reviews no widget. */
.elementor-widget-loop-carousel.cagr-carousel-reviews .swiper,
.elementor-element-ad412d5 .swiper {
	padding: 15px !important;
}

/* ===== Remove o efeito de fade/zoom do lazy load nas imagens ===== */
/* O WoodMart aplica wd-lazy-fade (opacity 0 → 1, transition .3s) em todas as
   imagens com lazy — ao carregar, elas "surgem" com um fade que parece zoom.
   Aqui as imagens aparecem direto (sem transição), mantendo o lazy funcional. */
.wd-lazy-fade,
.wd-lazy-blur,
img.wd-lazy-fade,
img.wd-lazy-blur {
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
}

/* ===== Ícones do cabeçalho maiores no desktop ===== */
@media (min-width: 1025px) {
	/* Carrinho e favoritos: ícones de fonte (woodmart-font) em 30px.
	   O WoodMart dimensiona o ícone por --wd-tools-icon-base-width (aplicada no ::before). */
	.wd-header-cart .wd-tools-icon,
	.wd-header-wishlist .wd-tools-icon {
		--wd-tools-icon-base-width: 30px;
		font-size: 30px;
	}
	/* Badge: fonte 12px e círculo maior para caber o número
	   (inclui a lista de presentes cagr, que usa a mesma classe .wd-tools-count) */
	.wd-header-cart .wd-tools-count,
	.wd-header-wishlist .wd-tools-count,
	.cagr-header-gift .wd-tools-count {
		font-size: 12px !important;
		min-width: 20px;
		height: 20px;
		line-height: 20px;
	}
	/* Lista de presentes (SVG do plugin cagr) no mesmo tamanho */
	.cagr-header-gift .wd-custom-icon {
		--wd-tools-icon-width: 30px;
	}
	.cagr-header-gift .wd-custom-icon svg {
		width: 30px !important;
		height: 30px !important;
	}
}

/* ===== Form de pesquisa do cabeçalho arredondado ===== */
/* O .searchform É o <form> (não é descendente de outro form) e o input é .s.
   O tema usa border-radius 5px — forçamos 12px no form do header. */
.wd-header-search-form input.s {
	border-radius: 12px !important;
}

/* ===== Texto de login/registro do cabeçalho: quebra de linha + caixa normal ===== */
/* O tema aplica uppercase + nowrap (texto de 245px numa linha). Limitamos a
   largura para quebrar em 2 linhas e removemos as maiúsculas. */
.wd-header-my-account .wd-tools-text {
	max-width: 130px;
	white-space: normal;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
	font-weight: 400;
}