/* ==========================================================================
   CANECAS 24 HORAS — CSS MESTRE
   Fonte única: woodmart-child/assets/css/c24h-custom.css.
   Carregado pelo functions.php do child theme com versão baseada em filemtime.
   Woodmart e Personalizador não devem receber cópias destas regras.
   ========================================================================== */

/* ==========================================================================
   SWATCHES | CANECAS 24 HORAS
   Manual de Identidade Visual: Cores #008744, #D97706, #1B1B1E | Fontes: Sora, Rubik
   ========================================================================== */

/* --- 0. SOBRESCREVER FONTE DO TEXTO DOS SWATCHES --- */
[class*="wd-swatches"].wd-text-style-4 .wd-swatch.wd-text .wd-swatch-text {
    font-size: 13px !important; /* Ajustado para 14px */
    font-weight: 500 !important; /* Peso 600 */
  	letter-spacing: 0.5px;
}

/* --- 1. AJUSTES GERAIS (Títulos e Linhas) --- */
table.variations th.label {
    padding-bottom: 8px !important;
    font-size: 16px !important;
    color: #1A3C34 !important;
    font-weight: 700 !important;
}

table.variations label {
    font-weight: 700 !important;
}

table.variations tr {
    margin-top: 20px !important; /* Reduzido de 15px para 10px */
    border-bottom: 1px dashed #eee;
    display: flex !important;
    flex-direction: column !important;
}
table.variations tr:last-child { border: none !important; }
table.variations td.value { width: 100% !important; }

/* --- 2. TAMANHOS (Folhas de Papel) --- */
.wd-swatches-product[data-id="pa_tamanho"] .wd-swatch {
    width: 80px !important; /* Aumentado para 110px */
    height: 105px !important; /* Aumentado para 90px */
    border-radius: 8px !important;
    background-color: #fff !important;
    border: 1px solid #e1e1e1 !important;
    margin: 0 8px 8px 0 !important;

    
    /* Texto Centralizado */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Fonte AJUSTADA */
    font-family: 'Sora', sans-serif !important;
    color: #555 !important;
    line-height: 1.1 !important;
    transition: color, background-color, border-color, box-shadow, transform, opacity 0.2s ease;
}

/* --- 3. MOLDURAS (Visual Real + Seleção Corrigida) --- */
.wd-swatches-product[data-id="pa_cor"] .wd-swatch {
    width: 80px !important; /* Aumentado para 110px */
    height: 105px !important; /* Aumentado para 90px */
    background-color: #ffffff !important;
    
    /* A Moldura Visual */
    border-style: solid !important;
    border-width: 6px !important; 
    border-radius: 4px !important;
    
    margin: 0 10px 8px 0 !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
    
    /* Texto */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Sora', sans-serif !important;
    line-height: 1 !important;
    color: #333 !important;     
    padding: 2px !important;
}

/* CORES REAIS (Borda da Moldura) */
.wd-swatch[data-value*="preta"]   { border-color: #111 !important; }
.wd-swatch[data-value*="branca"]  { border-color: #f5f5f5 !important; box-shadow: 0 0 0 1px #ccc inset !important; }
.wd-swatch[data-value*="natural"] { border-color: #E3CCA8 !important; }
.wd-swatch[data-value*="tabaco"]  { border-color: #5C4033 !important; }

/* --- 4. ORIENTAÇÃO (Geometria Ajustada) --- */
.wd-swatches-product[data-id="pa_formato"] .wd-swatch {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    margin-right: 15px !important;
    box-shadow: none !important;
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: 'Sora', sans-serif !important;
    color: #555 !important;
}

/* MEDIDAS AJUSTADAS (Padronizadas) */

/* Horizontal (Deitado) */
.wd-swatches-product[data-id="pa_formato"] .wd-swatch[data-value*="horizontal"] { 
    width: 105px !important; /* Padronizado em 110px */
    height: 80px !important; /* Padronizado em 90px */
}

/* Vertical (Em pé) */
.wd-swatches-product[data-id="pa_formato"] .wd-swatch[data-value*="vertical"] { 
    width: 80px !important; /* Padronizado em 110px */
    height: 105px !important; /* Padronizado em 90px */
}

/* --- 5. EFEITOS DE INTERAÇÃO (Hover e Seleção) --- */

/* Hover Geral (Laranja) */
.wd-swatches-product .wd-swatch:hover {
    border-color: #FF6B00 !important; 
    transform: translateY(-3px);
}

/* CORREÇÃO COMPLETA: Hover na Moldura mantém TUDO original */
.wd-swatches-product[data-id="pa_cor"] .wd-swatch:hover {
    transform: translateY(-3px); /* Só levanta */
    border-color: inherit !important; /* Não muda a cor */
}

/* Garantir cores específicas no hover da moldura */
.wd-swatches-product[data-id="pa_cor"] .wd-swatch[data-value*="preta"]:hover { 
    border-color: #111 !important; 
}
.wd-swatches-product[data-id="pa_cor"] .wd-swatch[data-value*="branca"]:hover { 
    border-color: #f5f5f5 !important; 
}
.wd-swatches-product[data-id="pa_cor"] .wd-swatch[data-value*="natural"]:hover { 
    border-color: #E3CCA8 !important; 
}
.wd-swatches-product[data-id="pa_cor"] .wd-swatch[data-value*="tabaco"]:hover { 
    border-color: #5C4033 !important; 
}


/* Selecionado (Tamanho e Orientação) */
.wd-swatches-product .wd-swatch.wd-active {
    background-color: #FFF5EB !important; /* Fundo Laranja Claro */
    border-color: #FF6B00 !important;     /* Borda Laranja */
    color: #FF6B00 !important;
}

/* CORREÇÃO DA SELEÇÃO DA MOLDURA (O Pulo do Gato) */
/* Aqui garantimos que a borda continue PRETA/BRANCA e o anel laranja fique FORA */
.wd-swatches-product[data-id="pa_cor"] .wd-swatch.wd-active {
    background-color: #fff !important; /* Fundo Branco */
    outline: 2px solid #FF6B00 !important; /* Anel Laranja */
    outline-offset: 3px;
    /* As cores abaixo forçam a borda original mesmo quando ativo */
}

.wd-swatches-product[data-id="pa_cor"] .wd-swatch.wd-active[data-value*="preta"] { border-color: #111 !important; }
.wd-swatches-product[data-id="pa_cor"] .wd-swatch.wd-active[data-value*="branca"] { border-color: #f5f5f5 !important; }
.wd-swatches-product[data-id="pa_cor"] .wd-swatch.wd-active[data-value*="natural"] { border-color: #E3CCA8 !important; }
.wd-swatches-product[data-id="pa_cor"] .wd-swatch.wd-active[data-value*="tabaco"] { border-color: #5C4033 !important; }

/* Texto Laranja apenas quando ativo */
.wd-swatches-product .wd-swatch.wd-active .wd-swatch-text {
    color: #FF6B00 !important;
}

/* Estilo aplicado para TODOS (Mobile e Desktop) */

/* --- AJUSTE DE COLUNAS DO RODAPÉ (4-2-2-2-2) --- */
/* O sistema do Woodmart usa 12 unidades totais. Estamos alocando 4 para a primeira e 2 para as restantes. */

.footer-sidebar .footer-column-1 { --wd-col-lg: 4 !important; }
.footer-sidebar .footer-column-2 { --wd-col-lg: 2 !important; }
.footer-sidebar .footer-column-3 { --wd-col-lg: 2 !important; }
.footer-sidebar .footer-column-4 { --wd-col-lg: 2 !important; }
.footer-sidebar .footer-column-5 { --wd-col-lg: 2 !important; }

.whb-header-bottom .wd-header-nav {
  width: 100% !important;
  flex: 1 1 auto !important;
}
.whb-header-bottom #menu-menu-categorias {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}
.whb-header-bottom #menu-menu-categorias > li {
  flex: 1 1 auto !important;
  text-align: center !important;
}


#menu-item-65940 .wd-nav-img,
#menu-item-65939 .wd-nav-img {
  min-height: 18px;
  height: 18px !important;
  width: auto !important;
}

.whb-top-bar .wd-nav-secondary > li > a img,
.whb-top-bar .wd-nav-secondary > li > a svg {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

/* ========================================================================== 
   CANECAS 24 HORAS - EXTRA PRODUCT OPTIONS
   Paleta: Brand Colors (Set 2025)
   ========================================================================== */

/* --- 1. CONTAINER GERAL --- */
#tm-extra-product-options {
    font-family: 'Sora', sans-serif !important; /* BRAND FONT: TEXTO */
    margin-top: 20px !important;
}

/* 1. Aumentar o GAP Geral (Título, Estrelas, Preço) */
.product-grid-item .product-wrapper {
    gap: 15px !important; /* Mude para 20px para sentir a diferença real */
}

/* 2. Espaçamento Específico: Imagem para o Título */
.product-grid-item .product-element-top {
    margin-bottom: 15px !important; /* Aqui criamos o espaço entre a foto e o texto */
}

/* 4. Garantir que a variável não nos bloqueie */
:root {
    --wd-prod-gap: 15px !important;
}

/* --- 2. TÍTULOS DAS SEÇÕES (H3) --- */
.tc-epo-label.tm-epo-element-label {
    font-family: 'Rubik', sans-serif !important; /* BRAND FONT: TÍTULO */
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #04272e !important; /* BRAND COLOR: SECUNDÁRIA */
    border-top: 1px dashed #eee !important;
    margin-top: -20px !important;
    padding-top: 20px !important;
    display: flex !important;
    align-items: center !important;
}

/* Asterisco de obrigatório */
.tm-epo-required {
    color: #D97706 !important; /* BRAND COLOR: DESTAQUE */
    margin-right: 5px !important;
}

/* --- 3. RADIO BUTTONS E CHECKBOXES --- */

/* Container dos campos */
.tmcp-ul-wrap {
    display: block !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* Cada opção - FORÇA QUEBRA DE LINHA */
.tmcp-field-wrap {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    float: none !important;
    clear: both !important;
    display: block !important;
}

.tmcp-field-wrap-inner {
    width: 100% !important;
    display: block !important;
}

.tc-field-label-wrap {
    width: 100% !important;
    display: block !important;
}

/* Label (área clicável) */
.tm-epo-field-label {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background-color: #FFFFFF !important;
    border: 2px solid #E8F0EE !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: color, background-color, border-color, box-shadow, transform, opacity 0.25s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tm-epo-field-label:hover {
    border-color: #008744 !important; /* BRAND COLOR: PRIMÁRIA (leve) */
    background-color: #F7F8FA !important; /* BRAND COLOR: FUNDO */
    transform: translateX(3px) !important;
}

/* Label quando selecionado - CORES DA MARCA */
.tc-active .tm-epo-field-label,
.tmcp-field-wrap.tc-active .tm-epo-field-label {
    border-color: #008744 !important; /* BRAND COLOR: PRIMÁRIA */
    background: linear-gradient(135deg, #F7F8FA 0%, #eefaf3 100%) !important; /* Gradiente Suave da Marca */
    box-shadow: 0 3px 12px rgba(0, 135, 68, 0.15) !important; /* Sombra Verde Marca */
}

/* Radio/Checkbox customizado */
.tc-input-wrap {
    display: flex !important;
    align-items: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

#tm-extra-product-options input[type="radio"],
#tm-extra-product-options input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #008744 !important; /* BRAND COLOR: PRIMÁRIA */
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Texto do label */
.tc-label-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1B1B1E !important; /* BRAND COLOR: TEXTO */
    line-height: 1.4 !important;
    flex: 1 !important;
}

.tc-active .tc-label-text {
    color: #008744 !important; /* BRAND COLOR: PRIMÁRIA */
    font-weight: 700 !important;
}

/* --- 4. CAMPOS DE TEXTO (Input e Textarea) - APENAS NO FORMULÁRIO DE PERSONALIZAÇÃO --- */

#tm-extra-product-options input[type="text"],
#tm-extra-product-options textarea {
    width: 100% !important;
    padding: 14px 18px !important;
    border: 2px solid #E8F0EE !important;
    border-radius: 12px !important;
    font-family: 'Sora', sans-serif !important; 
    font-size: 15px !important;
    color: #1B1B1E !important; 
    background-color: #F7F8FA !important; 
    transition: color, background-color, border-color, box-shadow, transform, opacity 0.25s ease !important;
    margin-top: 5px !important;
}

#tm-extra-product-options input[type="text"]:focus,
#tm-extra-product-options textarea:focus {
    outline: none !important;
    border-color: #008744 !important; 
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 68, 0.15) !important;
}

#tm-extra-product-options textarea {
    min-height: 100px !important;
    resize: vertical !important;
}

/* Placeholder específico também para não afetar outros campos */
#tm-extra-product-options input::placeholder,
#tm-extra-product-options textarea::placeholder {
    color: #9AA0A6 !important; 
    font-style: italic !important;
}

/* --- 5. UPLOAD DE ARQUIVO --- */

.cpf-upload-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 20px !important;
    background: linear-gradient(135deg, #F7F8FA 0%, #FFFFFF 100%) !important;
    border: 2px dashed #008744 !important; /* BRAND COLOR: PRIMÁRIA */
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: color, background-color, border-color, box-shadow, transform, opacity 0.3s ease !important;
    margin-top: 10px !important;
}

.cpf-upload-container:hover {
    background: linear-gradient(135deg, #eefaf3 0%, #F7F8FA 100%) !important;
    border-color: #006b36 !important; /* Verde um pouco mais escuro */
    transform: translateY(-2px) !important;
}

.cpf-upload-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
}

.cpf-upload-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #04272e !important; /* BRAND COLOR: SECUNDÁRIA */
    text-align: center !important;
}

.cpf-upload-text::before {
    content: "📸 " !important;
    font-size: 28px !important;
    display: block !important;
    margin-bottom: 8px !important;
}

#tm-extra-product-options input[type="file"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
}

.tc-max-file-size {
    display: block !important;
    text-align: center !important;
    color: #999 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
}

/* --- 6. DESCRIÇÕES E MENSAGENS --- */

.tm-element-description,
.tm-description {
    background: linear-gradient(135deg, #F7F8FA 0%, #eefaf3 100%) !important;
    border-left: 4px solid #008744 !important; /* BRAND COLOR: PRIMÁRIA */
    padding: 20px 24px !important;
    border-radius: 12px !important;
    margin-top: -15px !important;
    margin-bottom: 20px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #04272e !important; /* BRAND COLOR: SECUNDÁRIA */
    font-weight: 500 !important;
}

.tm-description b,
.tm-element-description b {
    color: #04272e !important; /* BRAND COLOR: SECUNDÁRIA */
    font-weight: 700 !important;
}

.tm-description p,
.tm-element-description p {
    margin: 0 !important;
    padding: 10px !important;
}

/* --- 8. BOTÃO LIMPAR SELEÇÃO --- */

.tm-epo-reset-radio,
.tm-has-clearbutton {
    position: relative !important;
}

.tm-epo-reset-radio {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    background-color: #008744 !important; /* BRAND COLOR: PRIMÁRIA */
    color: white !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color, background-color, border-color, box-shadow, transform, opacity 0.2s ease !important;
    font-size: 11px !important;
}

.tm-epo-reset-radio:hover {
    background-color: #04272e !important; /* BRAND COLOR: SECUNDÁRIA */
    transform: translateY(-50%) scale(1.1) !important;
}

/* --- 9. CHECKBOX (Estilo Especial) --- */

.tmcp-checkbox {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
}

/* --- 10. RESPONSIVIDADE --- */

@media (max-width: 768px) {
    .tc-epo-label.tm-epo-element-label {
        font-size: 16px !important;
    }
    
    .tm-epo-field-label {
        padding: 12px 15px !important;
    }
    
    .tc-label-text {
        font-size: 14px !important;
    }
    
    .tm-element-description,
    .tm-description {
        padding: 16px 18px !important;
    }
}

/* --- 11. CAMPOS DESABILITADOS --- */

.tcdisabled,
.tc-container-disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* --- 12. ANIMAÇÕES SUAVES --- */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cpf-element {
    animation: fadeIn 0.3s ease !important;
}

/* --- 13. AJUSTES FINAIS --- */

.tc-section-inner-wrap {
    padding: 15px 0 !important;
}

.tc-element-container {
    width: 100% !important;
}

.tc-container.cpf-element {
    margin-bottom: 18px !important;
}

/* =========================================================
   CÓDIGO COMPLETO PARA O SISTEMA DE DESCONTOS
========================================================= */

/* 1. ESTILO DO LINK/BANNER AMARELO QUE ABRE O MODAL */

.rp_wcdpd_product_page_modal_link span {
    text-decoration: none !important;
    cursor: pointer;
}

/* Adiciona sublinhado e cursor no texto do link */
.rp_wcdpd_product_page_modal_link span {
    text-decoration: underline;
    cursor: pointer;
}


/* 2. ESTILO E CENTRALIZAÇÃO DO MODAL (JANELA BRANCA) */
.rp_wcdpd_modal {
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
	
	/* Aparência e Tamanho */
	padding: 25px 30px !important;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
	max-width: 90%;
	width: 580px;
	
	/* Solução Definitiva para Altura: Adiciona scroll se o conteúdo for muito longo */
	max-height: 85vh !important;
    overflow-y: auto !important;
}

/* Fundo escuro que aparece com o modal */
.rp_wcdpd_overlay {
	background-color: rgba(0, 0, 0, 0.6) !important;
}


/* 3. ESTILO DO CONTEÚDO DENTRO DO MODAL (TÍTULO E TABELA) */
.rp_wcdpd_product_page_title {
	font-family: 'Sora', sans-serif;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
	color: #333;
}

.rp_wcdpd_pricing_table table {
	width: 100%;
	border-collapse: collapse;
}

.rp_wcdpd_pricing_table td {
	padding: 10px 25px !important; /* Espaçamento simétrico e altura controlada */
	border-bottom: 1px solid #f0f0f0;
	font-size: 15px;
	vertical-align: middle;
}

/* Alinhamento do texto nas colunas */
.rp_wcdpd_pricing_table td:first-child {
	text-align: left !important;
}
.rp_wcdpd_pricing_table td:last-child {
	text-align: right !important;
}

.rp_wcdpd_pricing_table tr:last-child td {
	border-bottom: none;
}


/* 4. REGRAS EXCLUSIVAS PARA O MOBILE */
@media (max-width: 768px) {

    /* Aplica o padding no link/banner para forçar a quebra da linha do texto */
    .rp_wcdpd_product_page .rp_wcdpd_product_page_modal_link {
        padding: 12px 40px !important;
    }
    
    /* Ajusta a largura e o padding do modal no mobile */
	.rp_wcdpd_modal {
		width: 95% !important;
		padding: 20px !important;
	}
}
/* Oculta o preço APENAS na navegação de produtos (hover do breadcrumb) */
.wd-products-nav .price {
	display: none !important;
}

/* Cor no icone Pix de pagamento */
.wcsp-container .payment .icon {
    display: inline-block;
    width: var(--wcsp-icons-size);
    min-width: var(--wcsp-icons-size);
    color: #2ebdaf;
    margin-right: 15px;
    margin-top: -3px;
}

/* --- Estilo para o Banner de Descontos por Quantidade --- */

/* Caixa principal que já existe (apenas para referência) */
.rp_wcdpd_product_page {
    width: 100%;
    margin-top: 15px !important;
   }

/* 1. O link clicável, que transformaremos em banner */
.rp_wcdpd_product_page .rp_wcdpd_product_page_modal_link {
	display: block; /* Faz ocupar a linha toda */
	background-color: #fff8e1; /* Um fundo amarelo bem claro, cor de "aviso" */
	border: 1px dashed #f5c542; /* Borda tracejada que remete a cupom */
	border-radius: 8px; /* Bordas arredondadas para combinar com os botões */
	padding: 12px 15px; /* Espaçamento interno para o texto "respirar" */
	text-align: center; /* Centraliza o conteúdo */
	text-decoration: none; /* Remove o sublinhado padrão */
	cursor: pointer;
	transition: color, background-color, border-color, box-shadow, transform, opacity 0.3s ease; /* Transição limitada às propriedades visuais */
}

/* 2. O texto dentro do banner */
.rp_wcdpd_product_page .rp_wcdpd_product_page_modal_link span {
	font-family: 'Sora', sans-serif; /* Mesma família de fonte dos botões */
	font-weight: 600; /* Semi-negrito para dar destaque */
	font-size: 14px;
	color: #594b1f; /* Cor de texto escura para bom contraste com o fundo */
}



/* 3. Efeito ao passar o mouse por cima */
.rp_wcdpd_product_page .rp_wcdpd_product_page_modal_link:hover {
	background-color: #fff2cc; /* Escurece um pouco o fundo */
	border-color: #e6b42b; /* Deixa a borda mais forte */
	transform: translateY(-2px); /* Efeito sutil de "levantar" o banner */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* --- Botes Lumise --- */
.product .lumise-list-button {
	background-color: #04272e !important;
	color: #ffffff !important;
	display: inline-block;
	font-size: 13px;
	height: 40px;
	line-height: 1.2em;
	margin-top: 5px;
	padding-bottom: 0;
	padding-top: 12px;
	text-align: center;
	width: 100%;
}

#lumise-customize-button {
	background-color: #04272e !important;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #ffffff !important;
}

/* Button */
.product .cart .single_add_to_cart_button:nth-child(2) {
	font-family: 'Sora', sans-serif;
}

/* --- CÓDIGO PARA LAYOUT RESPONSIVO (MOBILE) --- */
@media (max-width: 768px) {

	/* 1. Resetamos o container de frete para o layout de bloco padrão */
	#wc-shipping-simulator {
		display: block !important;
		margin-bottom: 15px; /* Adiciona um espaço abaixo do frete */
	}
    
    #wc-shipping-simulator .shipping-simulator-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

	/* 2. O container dos botões de compra é que vira flexbox */
	.product .variations_form .variations_button,
    .product .cart:not(.woocommerce-cart-form) {
		display: flex;
		flex-wrap: wrap; 
		gap: 10px; 
	}

	/* 3. Seletor de quantidade com largura definida */
	.product .cart .quantity {
		/* A MUDANÇA ESTÁ AQUI: O primeiro número (flex-grow) foi de 1 para 0 */
		flex: 0 1 90px; /* Dizemos para ele NÃO CRESCER, apenas ocupar seu espaço base */
	}

	/* 4. Botão "Comprar" ocupando o espaço restante */
	.product .cart .single_add_to_cart_button {
		flex: 1 1 150px; /* Este continua crescendo para preencher o espaço vazio */
	}
	
	/* 5. Botão "Personalizar" na linha de baixo */
	.product .cart .lumise-list-button {
		width: 100%;
	}
}

.wd-single-add-cart>div>*:last-child, .wd-single-add-cart>*:last-child {
    margin-bottom: -20px;
}

/* --- Estilo Final e Forçado para o Botão WhatsApp --- */

/* 1. O link principal, com estilos forçados */
a.wws-product-query-btn {
	display: flex !important;
	width: 100% !important;
	box-sizing: border-box !important; 
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: color, background-color, border-color, box-shadow, transform, opacity 0.3s ease !important;
	
	/* --- ESPECIFICAÇÕES FINAIS E FORÇADAS --- */
	height: 50px !important;                 /* ALTURA MÁXIMA de 50px */
	border-radius: 5px !important;            /* Bordas arredondadas */

	margin: 20px 0 !important;
	border: none !important;                  /* Sem borda */
	
	/* CORRIGIDO: Verde claro no padrão */
	background-color: #25D366 !important; 
}

/* 2. O container do ícone do WhatsApp com o tamanho solicitado */
.wws-product-query-btn__img {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

/* 3. A imagem do ícone, sempre branca */
.wws-product-query-btn__img img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	filter: brightness(0) invert(1) !important; /* Ícone sempre branco */
}

/* 4. O texto ao lado do ícone, sempre branco */
.wws-product-query-btn__text {
    margin-left: 5px !important;
}
.wws-product-query-btn__text span,
.wws-product-query-btn__text strong {
	font-family: 'Sora', sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: #ffffff !important; /* Texto sempre branco */
}

/* 5. Efeito ao passar o mouse: muda para o verde escuro */
a.wws-product-query-btn:hover {
	/* CORRIGIDO: Verde escuro no hover */
	background-color: #128C7E !important; 
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* --- Simulador de Frete (wc-shipping-simulator) - CÓDIGO COMPLETO E CORRIGIDO --- */

/* Bloco principal do simulador */


/* --- Simulador de Frete (wc-shipping-simulator) - CÓDIGO COMPLETO E HARMÔNICO --- */

/* Bloco principal do simulador */
#wc-shipping-simulator {
	max-width: 100%;
	margin-top: -35px;
	margin-bottom: 10px;
	width: 100% !important;
}

#wc-shipping-simulator h3 {
	font-size: 16px !important;
	margin-bottom: 10px;
}

/* --- SEÇÃO DE LAYOUT DO FORMULÁRIO --- */

/* 1. Container que agrupa o campo e o botão (Wrapper) */
#wc-shipping-simulator .shipping-simulator-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
	margin-bottom: 20px; /* Aumenta o espaço abaixo do formulário */
	max-width: 100%;
}

/* 2. O contêiner do campo de CEP (Label) */
#wc-shipping-simulator .shipping-simulator-wrapper label {
	flex-grow: 1;
	width: auto;
	height: 50px;
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	padding: 0;
	position: relative; /* Necessário para posicionar o ícone dentro */
	padding-left:18px;
}

/* NOVO: Ajuste no input para espaçar o texto do ícone */
#wc-shipping-simulator .shipping-simulator-wrapper .cep-number {
	padding-left: 10px !important; /* Adiciona espaço à esquerda para o ícone não colar no texto */
	height: 100%;
	width: 100%;
}

/* 3. O botão "Calcular Frete" */
#wc-shipping-simulator .shipping-simulator-wrapper .calculate {
	flex-shrink: 0;
	width: 160px;
	height: 50px;
	font-size: 14px;
	line-height: 1.2em !important;
	margin: 0;
	padding: 0 10px;
	text-transform: none;
	background-color: #ededed; /* Cor de fundo mais suave como na imagem */
	color: #333; /* Cor do texto do botão */
	border: 1px solid #e0e0e0; /* Borda sutil */
	border-radius: 6px; /* Bordas levemente arredondadas */
}

/* --- ESTILOS DA TABELA DE RESULTADOS (Harmonizados) --- */

#wc-shipping-simulator .table-freight {
	width: 100%;
	margin-top: 15px;
	border-collapse: collapse; /* Garante que não haja bordas duplas */
}

/* NOVO: Mais espaço vertical nas células da tabela */
#wc-shipping-simulator .table-freight th,
#wc-shipping-simulator .table-freight td {
	padding: 14px 10px; /* Aumentado de 5px para 14px para mais "respiro" */
	border-bottom: 1px solid #f0f0f0; /* Linha sutil separando as opções */
	text-align: left;
	vertical-align: middle;
}

#wc-shipping-simulator .table-freight th {
	background: transparent; /* Remove o fundo cinza do cabeçalho */
	font-family: 'Sora', sans-serif;
	font-size: 14px;
	color: #888;
	text-transform: uppercase;
}

#wc-shipping-simulator .table-freight td {
    color: #555; /* Cor de texto padrão para as opções */
}

/* Remove a linha de baixo do último item para um acabamento limpo */
#wc-shipping-simulator .table-freight tr:last-child td {
	border-bottom: none;
}

#fshipping-results tbody {
	font-size: 14px;
	font-weight: 500;
}

/* Estiliza o endereço exibido abaixo da tabela */
#wc-shipping-simulator .shipping-address {
    margin-top: 15px;
    font-size: 13px;
    color: #777;
}


/* --- AJUSTE PARA TELAS PEQUENAS (Responsividade) --- */

@media (max-width: 480px) {
	#wc-shipping-simulator .shipping-simulator-wrapper {
		flex-direction: column;
		align-items: stretch;
	}

	#wc-shipping-simulator .shipping-simulator-wrapper .calculate {
		width: 100%;
	}
}

/* --- Elementos de Produtos e Carrinho --- */
.entry-summary .cart .rightpress_product_price_live_update{
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}

.entry-summary .cart .quantity{
	margin-right: 5px;
	padding-right: 0;
	width: 80px;
}

.website-wrapper .main-page-wrapper .container-fluid .content-layout-wrapper .breadcrumbs-location-summary .product .container .product-image-summary-wrap .product-image-summary .product-image-summary-inner .entry-summary .summary-inner .cart .single_add_to_cart_button{
	width: 41% !important;
}

.products .product .add_to_cart_button,.products .product .product_loop_button{
	display: none !important;
}

/* Fazer o Card Inteiro do Produto ser Clicvel */
.woocommerce ul.products li.product{
	position: relative;
}

.woocommerce ul.products li.product .woocommerce-loop-product__link{
	font-size: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

/* Oculta as avaliaes em estrela APENAS na grade de produtos */
.woocommerce ul.products li.product .star-rating{
	display: none;
}

/* Svg */
.wd-single-price .payment-discount svg{
	padding-top:0px;
	padding-bottom:0px;
	margin-top:5px;
}

/* Button */
.wd-btn-design-full .cart .single_add_to_cart_button{
	font-size:14px;
	line-height:2.85em;
	letter-spacing:0.5px;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	border-top-left-radius:8px !important;
	border-top-right-radius:8px !important;
	border-bottom-left-radius:8px !important;
	border-bottom-right-radius:8px !important;
	min-height:5px;
	height:50px;
}

/* Button */
.cart .quantity input[type=button]{
	height:50px;
}

/* Input */
.cart .quantity input[type=number]{
	height:50px;
}

/* Zipcode */
#zipcode{
	font-size:14px;
}

/* 601px and larger screen sizes */
@media (min-width: 601px){

	.elementor-form .elementor-field-group .elementor-button{
		top: -12px;
	}
	
	#wc-shipping-simulator .shipping-simulator-wrapper label span{
		font-size: 14px;
	}
	
	/* Label */
	#wc-shipping-simulator .shipping-simulator-wrapper label{
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-top-color: #e4e4e4;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}
	
	/* Button */
	#wc-shipping-simulator .shipping-simulator-wrapper .calculate{
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

}
/* ========================================================================== 
   Estilização da Barra de Rolagem (Scrollbar)
   ========================================================================== */

/* --- Para Firefox --- */
/* Define a cor da barra móvel e a cor do fundo da trilha */
html {
  scrollbar-color: #008744 #F0F0F0; /* Cor da Barra (thumb) e Cor do Fundo (track) */
  scrollbar-width: thin; /* Opcional: Deixa a barra mais fina e elegante */
}

/* --- Para Chrome, Safari, Edge, e outros baseados em WebKit --- */

/* 1. A barra de rolagem inteira */
::-webkit-scrollbar {
  width: 12px; /* Largura da barra */
}

/* 2. A trilha (o fundo da barra) */
::-webkit-scrollbar-track {
  background: #F0F0F0; /* Um cinza bem claro, que combina com nosso fundo bege */
}

/* 3. A barra móvel (o "polegar" que você arrasta) */
::-webkit-scrollbar-thumb {
  background-color: #008744;    /* Nosso Verde Consciência */
  border-radius: 20px;       /* Deixa as pontas totalmente arredondadas */
  border: 3px solid #F0F0F0; /* Cria uma pequena borda da cor da trilha, fazendo a barra parecer mais fina */
}

/* 4. Efeito ao passar o mouse sobre a barra móvel */
::-webkit-scrollbar-thumb:hover {
  background-color: #083D33; /* Nosso Verde Consciência um pouco mais escuro */
}

/* ==========================================================================
   Melhorias Adicionais de UX/UI
   ========================================================================== */

/* 1. Rolagem Suave (já adicionado) */
html {
  scroll-behavior: smooth;
}

/* 2. Transições Suaves para Links */
.website-wrapper a,
.website-wrapper button {
  transition: color, background-color, border-color, box-shadow, transform, opacity 0.3s ease-in-out;
}

/* 3. Cor de Seleção de Texto da Marca */
::selection {
  background-color: #008744; /* Verde Consciência */
  color: #FFFFFF;
}

/* 4. Estilo de Foco Aprimorado para Formulários */
input:focus,
textarea:focus,
select:focus {
  border-color: #008744 !important;
  box-shadow: 0 0 0 3px rgba(10, 79, 66, 0.2) !important;
  outline: none; /* Remove o contorno padrão do navegador */
}
/* Efeito de "pressionar" o botão ao clicar */
.button:active, 
.btn:active, 
button:active {
  transform: scale(0.98);
  box-shadow: none; /* Opcional: remove a sombra no clique */
}
/* Cria um sublinhado personalizado para links importantes */
.link-animado { /* Adicione esta classe aos links que quiser animar */
  text-decoration: none;
  background-image: linear-gradient(to right, #008744, #008744);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 0% 2px; /* Começa com largura 0% e 2px de altura */
  transition: background-size 0.4s ease-in-out;
}
/* Efeito de Vidro Fosco */
.barra-vidro-fosco {
  background-color: rgba(10, 79, 66, 0.5); /* Nosso Verde com 50% de transparência */
  -webkit-backdrop-filter: blur(10px); /* O desfoque para Chrome/Safari */
  backdrop-filter: blur(10px); /* O desfoque para Firefox */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil para dar acabamento */
}
.link-animado:hover {
  background-size: 100% 2px; /* Expande para 100% da largura no hover */
}
/* Efeito de Letra Capitular (Drop Cap) */
.paragrafo-editorial::first-letter {
  color: #008744; /* Nosso Verde Consciência */
  font-family: 'Rubik', sans-serif; /* Usa a fonte de título para a letra */
  font-weight: 700;
  font-size: 4rem; /* Tamanho grande */
  float: left;
  line-height: 0.8;
  margin-right: 10px;
  margin-top: 5px;
}

/*
 * Solução de Acessibilidade: Garante que os links no conteúdo
 * sejam sublinhados para serem distinguíveis sem depender da cor.
*/
.elementor-text-editor a {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.4); /* Deixa o sublinhado um pouco mais sutil */
}

/* Opcional: Remove o sublinhado quando o usuário passa o mouse por cima */
.elementor-text-editor a:hover {
    text-decoration: none;
}

/* Efeitos Gerais */

.site-logo {
    transition: transform 0.3s ease-in-out;
}

.site-logo:hover {
    transform: scale(1.08);
}
	
.woocommerce-checkout #payment .wc_payment_methods li.wc_payment_method_pagaleve-pix label img {
    max-height: 30px !important; /* A altura que você deseja */
    width: auto !important;
}

/* Ajustes para as legendas de imagens nos posts */
.wp-block-image figcaption {
    font-size: 14px; /* Define o tamanho da fonte */
    font-style: italic; /* Coloca o texto em itálico */
    text-align: center; /* Centraliza o texto */
    margin-bottom: 2em; /* Adiciona um espaço generoso abaixo da legenda */
}
	
/* ==========================================================================
   CASHBACK + CITAÇÃO — VERSÃO FINAL
   ========================================================================== */

/* ========================================================================== 
   CITAÇÃO
   ========================================================================== */

ol.lista-citacao {
    list-style: none !important;
    padding-left: 0 !important;
    width: 100% !important;
}

ol.lista-citacao li {
    background-color: #ffffff !important;
    padding: 15px 20px 15px 50px !important;
    margin-bottom: 14px !important;
    font-size: 1.0em !important;
    font-style: italic !important;
    color: #1B1B1E !important;
    position: relative !important;
    border-radius: 5px !important;
    border: 1px solid #eee !important;
}

ol.lista-citacao li::before {
    content: '' !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23D97706' stroke='%23D97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
}

ol.lista-citacao li:hover {
    background-color: #F7F8FA !important;
    transition: background-color 0.2s ease-in-out !important;
}

@media (max-width: 480px) {
    ol.lista-citacao li {
        padding: 12px 15px 12px 44px !important;
        font-size: 0.92em !important;
    }

    ol.lista-citacao li::before {
        left: 12px !important;
        width: 16px !important;
        height: 16px !important;
    }
}

/* ============================================================
   C24H — HERO DA LOJA E DAS CATEGORIAS
   Adicionado em 29/08/2026. Sem JavaScript.
   Para trocar o fundo verde pelo claro, mude a cor do container
   no Elementor para #f7f8fa e adicione a classe c24h-hero--claro.
   ============================================================ */

.c24h-hero-selos{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0;
  padding:0; list-style:none;
}
.c24h-hero-selos li{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.14); color:#fff;
  font-family:Rubik,sans-serif; font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:999px; line-height:1; margin:0;
}
.c24h-hero-selos li::before{ content:"✓"; font-size:13px; opacity:.9; }

/* variante de fundo claro — alinhada ao carrinho e ao checkout */
.c24h-hero--claro .c24h-hero-selos li{
  background:#dff6e8; color:#056839;
}

.c24h-hero-acoes{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.c24h-hero-acoes .c24h-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:0 26px; border-radius:8px;
  font-family:Rubik,sans-serif; font-size:14px; font-weight:750; line-height:1;
  text-decoration:none; border:1px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.c24h-btn--claro{ background:#fff; color:#008744; }
.c24h-btn--claro:hover{ background:#04272e; color:#fff; }
.c24h-btn--vazado{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.c24h-btn--vazado:hover{ background:#fff; color:#008744; border-color:#fff; }

.c24h-hero--claro .c24h-btn--claro{ background:#008744; color:#fff; }
.c24h-hero--claro .c24h-btn--claro:hover{ background:#04272e; }
.c24h-hero--claro .c24h-btn--vazado{ color:#04272e; border-color:#e8f0ee; }
.c24h-hero--claro .c24h-btn--vazado:hover{ background:#008744; border-color:#008744; color:#fff; }

.c24h-hero-selos li:focus-visible,
.c24h-hero-acoes .c24h-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.c24h-hero--claro .c24h-hero-acoes .c24h-btn:focus-visible{ outline-color:#008744; }

@media (max-width:600px){
  .c24h-hero-selos{ gap:6px; margin-top:14px; }
  .c24h-hero-selos li{ font-size:11.5px; padding:6px 11px; }
  .c24h-hero-acoes .c24h-btn{ width:100%; }
}