/* ==========================================================================
   ESTILIZAÇÃO CENTRALIZADA E BLINDADA: GRADE DE PRODUTOS RESPONSIVA
   ========================================================================== */

/* Definição do fundo cinza-claro moderno e respiros da seção */
.shop-products-section {
	background-color: #f8f9fa !important;
	padding: 20px 0;
	min-height: 85vh;
}
@media (min-width: 768px) {
.shop-products-section {
	padding: 40px 0;
}
}
/* ALINHAMENTO MESTRE DO TOPO: Zera as margens para cravar Categorias e Ordenar na mesma linha */
.shop-products-section .row {
	align-items: flex-start !important;
	display: flex !important;
}
.shop-products-section .col-lg-3, .shop-products-section .col-lg-9, .shop-products-section .col-md-5, .shop-products-section .col-md-7 {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* SIDEBAR DA ESQUERDA: Menu de Categorias (Formato Card Limpo) */
.filter-sidebar-card {
	background: #ffffff !important;
	border-radius: 12px !important;
	padding: 20px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	border: 1px solid #eef2f5 !important;
	margin-top: 0 !important;
	margin-bottom: 25px;
}
.block-layered-nav .block-title {
	border-bottom: 2px solid #0062bd;
	padding-bottom: 8px;
	margin-bottom: 15px;
}
.block-layered-nav .block-title span {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	text-transform: uppercase;
}
.block-layered-nav dt a {
	font-size: 14px;
	font-weight: 600;
	color: #222 !important;
	display: block;
	padding: 10px 0;
	border-bottom: 1px solid #f5f5f5;
}
.sort-byfiltro select {
	width: 100%;
	height: 40px;
	border-radius: 6px;
	border: 1px solid #ced4da;
	padding: 5px 10px;
	margin-bottom: 15px;
}
/* BARRA DA DIREITA: Ordenação Superior (Formato Card Alinhado) */
.shop-top-bar {
	background: #ffffff !important;
	border-radius: 12px !important;
	padding: 15px 20px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	border: 1px solid #eef2f5 !important;
	margin-top: 0 !important;
	margin-bottom: 25px;
}
.single-shorter {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* --- CONTROLE DO GRID RESPONSIVO PARA REPEATLAYOUT="FLOW" --- */
.products-grid-container {
	display: flex !important;
	flex-wrap: wrap !important;
	margin-left: -10px !important;
	margin-right: -10px !important;
	width: auto !important;
}
/* Celular (Padrão): Força estabilidade em 2 colunas lado a lado */
.products-grid-container > span, .products-grid-container .product-responsive-cell {
	padding-left: 10px !important;
	padding-right: 10px !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
	box-sizing: border-box !important;
	margin-bottom: 20px !important;
	display: inline-block !important;
	vertical-align: top !important;
}

/* Tablet: Organiza em 3 colunas */
@media (min-width: 768px) {
.products-grid-container > span,  .products-grid-container .product-responsive-cell {
	flex: 0 0 33.3333% !important;
	max-width: 33.3333% !important;
}
}

/* Desktop (Computadores): Divide perfeitamente em 4 colunas */
@media (min-width: 992px) {
.products-grid-container > span,  .products-grid-container .product-responsive-cell {
	flex: 0 0 25% !important;
	max-width: 25% !important;
}
}
/* --- DESIGN COMPACTO DO CARD DO PRODUTO (SEM DUPLICAÇÃO OU QUEBRAS) --- */
.product-card-custom {
	background: #ffffff !important;
	border-radius: 12px !important;
	border: 1px solid #eef2f5 !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: space-between !important;
	height: 100% !important;
	box-sizing: border-box !important;
	padding: 15px !important;
	/* Efeito de elevação lenta e fluida ao interagir com o mouse */
	transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
/* Efeito de Movimento (Hover): Card levanta sutilmente */
.product-card-custom:hover {
	transform: translateY(-6px) !important;
	box-shadow: 0 12px 24px rgba(0, 98, 189, 0.08) !important;
	border-color: #d2e3f7 !important;
}
/* Área Interna da Imagem (Alinhamento Vertical Nativo Consecutivo) */
.image-container-fit {
	width: 100% !important;
	height: 200px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 12px !important;
	overflow: hidden !important;
	background-color: #ffffff !important;
}
@media (min-width: 576px) {
.image-container-fit {
	height: 180px !important;
}
}
.image-container-fit img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	transition: transform 0.3s ease !important;
}
/* Efeito de zoom suave na foto do produto no hover */
.product-card-custom:hover .image-container-fit img {
	transform: scale(1.04);
}
/* Área de Textos e Preços */
.info-container-custom {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1 !important;
	justify-content: space-between !important;
	padding: 0 !important;
}
/* Nome do Doce (Sempre abaixo da imagem) */
.product-title-link {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #2b3135 !important;
	line-height: 1.4 !important;
	margin-bottom: 8px !important;
	height: 38px !important;
	overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* Preço do Doce */
.product-price-custom {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin-bottom: 12px !important;
	display: block !important;
}
/* --- BOTÃO PREMIUM CUSTOMIZADO COM ÍCONE DE CARRINHO --- */
.btn-image-wrapper {
	position: relative !important;
	width: 100% !important;
	height: 38px !important;
	display: block !important;
	margin-top: auto !important; /* Fixa o botão perfeitamente na base do card */
}
/* Oculta o ícone quadrado antigo original do ASP.NET */
.btn-add-cart-premium {
	background-color: #0062bd !important; /* Azul Royal oficial extraído do seu modelo */
	border-radius: 25px !important;
	width: 100% !important;
	height: 38px !important;
	cursor: pointer !important;
	box-shadow: 0 4px 10px rgba(0, 98, 189, 0.12) !important;
	display: block !important;
	padding-left: 100% !important;
	object-position: -9999px -9999px !important;
	overflow: hidden !important;
	border: none !important;
}
/* Injeta graficamente o texto e o ícone de mercado do FontAwesome por cima */
.btn-image-wrapper::after {
	content: "\f07a  Adicionar" !important;
	font-family: "Font Awesome 5 Free", "Roboto", sans-serif !important;
	font-weight: 900 !important;
	font-size: 13px !important;
	color: #ffffff !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	pointer-events: none !important; /* Permite o clique passar direto para o ImageButton real */
}
.btn-image-wrapper:hover .btn-add-cart-premium {
	background-color: #004da1 !important;
}
/* Barra de Paginação Inferior */
.pagination {
	justify-content: center;
	margin-top: 35px;
	flex-wrap: wrap;
	gap: 5px;
}
.pagination .page-link {
	color: #0062bd !important;
	border-radius: 6px;
	font-weight: 600;
	padding: 8px 14px;
}
.pagination .page-item.active .page-link, .pagination .page-link:hover {
	background-color: #0062bd !important;
	border-color: #0062bd !important;
	color: #ffffff !important;
}
/* ==========================================================================
   FORÇAMENTO DO TOM CINZA CLARO COMPATÍVEL COM DETALHES.ASPX ORIGINAL
   ========================================================================== */

/* Pinta o fundo da página de detalhes inteira, ignorando o style antigo */
body, .single_product, .single_product .container-fluid, .single_product .row, .product_description_area, .shop-products-section {
	background-color: #f8f9fa !important;
}
/* Garante que o fundo cinza contorne também a área inferior de produtos similares */
.single_product + .container-fluid, .single_product ~ .container-fluid {
	background-color: #f8f9fa !important;
}
/* Remove bordinhas brancas ou sombras que possam contrastar errado com o cinza */
.single_product {
	border: none !important;
	box-shadow: none !important;
}
/* ==========================================================================
   PADRONIZAÇÃO PREMIUM: ÁREA DO CLIENTE E CADASTRO
   ========================================================================== */

/* ==========================================================================
   FORÇAMENTO DAS ABAS DE NAVEGAÇÃO PROFISSIONAIS (BLINDADO)
   ========================================================================== */

/* Barra horizontal que segura as abas */
.client-menu-tabs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	border-bottom: 2px solid #eef2f5 !important;
	padding: 0 0 1px 0 !important;
	margin: 0 0 35px 0 !important;
	width: 100% !important;
	list-style: none !important;
}
/* Cada Aba individual */
.client-menu-tabs .tab-item {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 42px !important;
	padding: 0 22px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #555555 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	background-color: #f8fafc !important; /* Fundo cinza bem clarinho para abas inativas */
	border: 1px solid #e2e8f0 !important;
	border-bottom: none !important;
	border-top-left-radius: 8px !important;
	border-top-right-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	white-space: nowrap !important;
}
/* Efeito ao passar o mouse nas abas apagadas */
.client-menu-tabs .tab-item:hover {
	color: #0062bd !important;
	background-color: #edf2f7 !important;
	border-color: #cbd5e1 !important;
}
/* ABA ATIVA DESTACADA (Aba que está aberta no momento) */
.client-menu-tabs .tab-item.active-tab {
	color: #0062bd !important;
	background-color: #ffffff !important; /* Fundo branco puro para casar com o card */
	border-color: #eef2f5 !important;
	border-top: 3px solid #0062bd !important; /* Linha azul de destaque no topo */
	border-bottom: 3px solid #ffffff !important; /* Apaga a linha cinza debaixo */
	margin-bottom: -2px !important;
	position: relative !important;
	z-index: 5 !important;
}
/* Ajustes dos inputs text padrões do cadastro */
.register .form-group span {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #4a5568;
	margin-bottom: 6px;
	text-transform: uppercase;
}
.register .form-group span label {
	color: red;
	margin-left: 2px;
}
.register .form-control {
	height: 44px !important;
	border: 1px solid #ced4da !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	background-color: #ffffff !important;
	transition: border-color 0.2s;
}
.register .form-control:focus {
	border-color: #0062bd !important;
	box-shadow: 0 0 0 0.2rem rgba(0, 98, 189, 0.1) !important;
	outline: none;
}
/* Estilização para campos bloqueados/desativados (Enabled="FALSE") */
.register .form-control:disabled, .register .form-control[disabled] {
	background-color: #f8f9fa !important;
	color: #6c757d !important;
	cursor: not-allowed;
	border-color: #e2e8f0 !important;
}
/* Validadores de erro em vermelho sutil */
.register .text-danger {
	font-size: 12px;
	font-weight: 600;
	margin-top: 4px;
	display: block;
}
/* ============================================================
   PADRONIZAÇÃO COMPLETA: TAMANHO IGUAL, SEM ZOOM E SEM CORTES
   ============================================================ */

/* 1. PADRONIZA A ÁREA DA IMAGEM EM UM QUADRADO PERFEITO */
/* Cria um espaço fixo igual para todos os produtos ficarem alinhados */
.image-container-fit, .product-card-custom .image-container-fit {
	width: 100% !important;
	height: 180px !important; /* Altura padronizada ideal para a vitrine */
	max-height: 180px !important;
	min-height: 180px !important;
	display: flex !important;
	align-items: center !important; /* Centraliza o produto verticalmente */
	justify-content: center !important; /* Centraliza o produto horizontalmente */
	overflow: hidden !important;
	background-color: #ffffff !important; /* Fundo branco para preencher as sobras */
	padding: 10px !important; /* Margem de segurança para a imagem não colar nas bordas */
	box-sizing: border-box !important;
}
/* 2. ENQUADRA A IMAGEM PROPORCIONALMENTE DENTRO DO QUADRADO */
/* O 'contain' garante que a imagem inteira apareça sem que nenhuma parte seja coberta */
.image-container-fit img, .product-card-custom .image-container-fit img, .default-img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important; /* Mostra o doce 100% inteiro sem cortes laterais ou verticais */
	position: static !important;
	margin: auto !important;
	/* BLOQUEIO DO ZOOM: Neutraliza a animação de crescimento da linha 162 */
	transform: none !important;
	scale: 1 !important;
	transition: none !important;
}
/* Garante o bloqueio de zoom também quando o mouse interage com o card */
.product-card-custom:hover .image-container-fit img {
	transform: none !important;
	scale: 1 !important;
}
/* 3. BANNERS EM TELA CHEIA (CORREÇÃO DE DISTORÇÃO) */
#header-carousel .carousel-inner .carousel-item img, #header-carousel img, img.style-cover {
	width: 100% !important;
	height: 100% !important;
	max-height: 430px !important;
	object-fit: cover !important; /* Ocupa a largura total da tela sem esticar */
	object-position: center !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}
#header-carousel, .carousel-inner, .carousel-item {
	height: 430px !important;
	max-height: 430px !important;
	width: 100% !important;
	overflow: hidden !important;
	position: relative !important;
}
/* ============================================================
   MIGRAÇÃO BLINDADA: PRODUTOS INTEIROS E BANNERS FULL SCREEN
   ============================================================ */

/* 1. SELETOR DE FORÇA MÁXIMA PARA O QUADRADO DO PRODUTO (VITRINE) */
body .shop-products-section .products-grid-container .product-responsive-cell .product-card-custom .image-container-fit {
	width: 100% !important;
	height: 190px !important; /* Mantém todos os cards alinhados na mesma altura */
	max-height: 190px !important;
	min-height: 190px !important;
	display: flex !important;
	align-items: center !important; /* Centraliza verticalmente o doce */
	justify-content: center !important; /* Centraliza horizontalmente o doce */
	background-color: #ffffff !important; /* Garante o fundo branco puro em volta */
	padding: 10px !important; /* Margem interna para a embalagem não colar nas bordas */
	box-sizing: border-box !important;
	position: relative !important;
	overflow: hidden !important; /* Proteção total de quebra de layout */
}
/* 2. RESOLUÇÃO DE CORTE: OBRIGA A IMAGEM MAIOR A ENCOLHER DENTRO DO CARD */
body .shop-products-section .products-grid-container .product-responsive-cell .product-card-custom .image-container-fit img, body .products-grid-container .product-responsive-cell .product-card-custom img, body .image-container-fit img, body img[id*="ImgProduto"], body .default-img {
	/* Desativa as classes w-100 e h-100 do aspx que estavam forçando a distorção */
	width: auto !important;
	height: auto !important;
	/* LIMITADORES REAIS: Força a imagem a encolher e se moldar dentro do quadrado de 190px */
	width: 100% !important;
	height: 100% !important;
	max-width: 170px !important;  /* Impede que o amendoim estique demais para as laterais */
	max-height: 170px !important; /* Impede que o amendoim estoure o topo e a base */
	/* Mantém o produto 100% inteiro, diminuindo ou aumentando de forma idêntica */
	object-fit: contain !important;
	position: static !important;
	margin: auto !important;
	display: block !important;
	/* REMOVE DEFINITIVAMENTE O ZOOM OU TRANSLADAÇÃO NO HOVER */
	transform: none !important;
	scale: 1 !important;
	transition: none !important;
}
/* Bloqueio redundante de animações em qualquer interação com o card do produto */
body .product-card-custom:hover img, body .product-responsive-cell:hover img, body .image-container-fit img:hover, body .product-card-custom:hover .image-container-fit img {
	transform: none !important;
	scale: 1 !important;
	transition: none !important;
}
/* 3. COBERTURA DO CARROSSEL (BANNERS FULL SCREEN NA PROPORÇÃO CORRETA) */
body #header-carousel .carousel-inner .carousel-item img, body #header-carousel img, body .carousel-inner img, body img.style-cover {
	width: 100% !important;
	height: 100% !important;
	max-height: 430px !important;
	object-fit: cover !important;
	object-position: center !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
}
body #header-carousel, body .carousel-inner, body .carousel-item {
	height: 430px !important;
	max-height: 430px !important;
	width: 100% !important;
	overflow: hidden !important;
	position: relative !important;
}