/*
==============================================
  CSS CONSOLIDADO E OTIMIZADO
==============================================
*/

/* =============================================
   1. GERAL, VARIÁVEIS E FONTES
   ============================================= */
:root {
    --primary-color: #103c64;
    --secondary-color: #1c3379;
    --accent-color: #000;
    --light-gray: #103c64;
    --dark-text: #000646;
    --primary-rgb: 9, 21, 87;
}

body {
    font-family: 'Poppins', sans-serif;
    padding-top: 0;
    overflow-x: hidden; /* Impede a barra de rolagem horizontal */
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.fundo-site {
    background-image: url(img/lines.png);
    background-size: cover;
    background-position: bottom;
}

.clear {
    clear: both;
}

.promo-banner-container .swiper-wrapper {
    height: 450px !important;
}

.promo-banner-container {
    background-image: url(img/fundo-topo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* =============================================
   2. CABEÇALHO E NAVEGAÇÃO
   ============================================= */

/* --- 2.1 Estrutura e Header Fixo --- */
.top-bar {
    background-color: #f8f9fa;
    color: #495057;
    font-size: 0.85rem;
    font-weight: 500;
}

.main-header {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
}

.site-header.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.4s ease-in-out;
}

body.header-is-fixed {
    padding-top: var(--header-height, 150px);
}

.header-logo img {
    max-height: 45px;
    width: auto;
}

/* --- 2.2 Barra de Busca e Autocomplete --- */
.header-search .search-form {
    position: relative;
}

.header-search .form-control {
    height: 48px;
    border-radius: 25px;
    padding-left: 20px;
    padding-right: 50px;
    border: 1px solid #ced4da;
}

.header-search .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(19, 36, 104, 0.25);
}

.header-search .search-submit {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50px;
    background: transparent;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 1.1rem;
}

.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    max-height: 400px;
    overflow-y: auto;
    display: none;
}

.autocomplete-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.autocomplete-results li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: var(--dark-text);
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.autocomplete-results li:last-child a {
    border-bottom: none;
}

.autocomplete-results li a:hover {
    background-color: #f8f9fa;
    color: var(--primary-color);
}

.autocomplete-results img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
}

.autocomplete-results .product-info {
    display: flex;
    flex-direction: column;
}

.autocomplete-results .product-title {
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}

.autocomplete-results .product-price {
    font-size: 0.9rem;
    color: #6c757d;
}

.autocomplete-results .product-price ins {
    background: none;
    color: var(--primary-color);
    font-weight: bold;
}

.autocomplete-results .product-price del {
    font-size: 0.85rem;
}

.autocomplete-results .no-results {
    padding: 20px;
    text-align: center;
    color: #6c757d;
}

/* --- 2.3 Ícones de Ação (Conta, Carrinho) --- */
.header-actions {
    gap: 25px;
}

.header-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dark-text);
    text-decoration: none;
    position: relative;
}

.header-action-item:hover {
    color: var(--primary-color);
}

.header-action-item i {
    font-size: 2rem;
    color: var(--accent-color);
}

.header-action-item div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.header-action-item span {
    font-size: 0.8rem;
    font-weight: 400;
}

.header-action-item strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #000;
}

.header-action-item .cart-count {
    position: absolute;
    top: -8px;      /* Move um pouco para cima */
    right: -12px;     /* Move mais para a direita, distanciando do ícone */
    font-size: 11px;  /* Aumenta o tamanho do número */
    font-weight: 700; /* Deixa o número em negrito */
    width: 22px;      /* Aumenta a largura do círculo */
    height: 22px;     /* Aumenta a altura do círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff; /* Adiciona uma borda branca para contraste */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra para destaque */
}


/* --- 24. SELETOR DE QUANTIDADE DO MINI-CARRINHO --- */
.woocommerce-mini-cart-item .quantity {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: #103c64;
}

.woocommerce-mini-cart-item .header-action-item span{    
    color: #103c64;
}

.woocommerce-mini-cart-item .quantity .minus,
.woocommerce-mini-cart-item .quantity .plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #f0f2f5;
    border: 1px solid #e0e4e8;
    color: var(--primary-color);
    border-radius: 50%;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.woocommerce-mini-cart-item .quantity .minus:hover,
.woocommerce-mini-cart-item .quantity .plus:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.woocommerce-mini-cart-item .quantity .input-text.qty {
    width: 40px !important;
    height: 30px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #ced4da;
    box-shadow: none;
    padding: 5px;
    font-weight: 600;
    -moz-appearance: textfield;
}

.woocommerce-mini-cart-item .quantity .input-text.qty::-webkit-outer-spin-button,
.woocommerce-mini-cart-item .quantity .input-text.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

 

.cart-count, .wishlist-count-badge {
    --bs-bg-opacity: 1;
    background-color: #103c64;
}
.header-action-item>a {
    border-radius: 8px;
    transition: background-color 0.25s ease-in-out;
    text-decoration: none;
}

.header-action-item>a:hover {
    background-color: #f5f8fa;
    border-color: #e9ecef;
}

.header-action-item a>i.fa-user-circle {
    font-size: 1.9rem;
    margin-right: 12px;
}


/* --- Animação Hover nos Ícones do Cabeçalho --- */

/* Adiciona uma transição suave para a animação do ícone */
.header-action-item i {
    transition: transform 0.2s ease-in-out;
}

/* Aumenta o tamanho do ícone quando o mouse passa sobre o link */
.header-action-item:hover i {
    transform: scale(1.2); /* Aumenta o ícone em 20% */
    color: var(--primary-color);
}


.header-action-item a.dropdown-toggle {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.header-action-item a.dropdown-toggle::after {
    position: absolute;
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
}

/* --- 2.4 Mini-carrinho --- */
.header-action-item.dropdown {
    position: relative;
}

.header-action-item .cart-contents::after {
    display: none;
}

.minicart-dropdown {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: all 0.25s ease-in-out;
    position: absolute;
    top: 100%;
    right: -15px;
    width: 340px;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
}

.header-action-item.dropdown:hover>.minicart-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.woocommerce-mini-cart-item,
.mini_cart_item {
    list-style: none;
}

.woocommerce-mini-cart-item a,
.mini_cart_item a {
    text-decoration: none;
    color: var(--primary-color);
}

/* --- 2.5 Navegação Principal e Mega Menu --- */
.main-navbar {
    background-color: var(--primary-color);
    padding: 0;
}

.main-navbar .nav-link {
    color: #ffffff;
    padding: 1rem 1.25rem;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
    background-color: var(--accent-color);
    border-bottom-color: #fff;
}

.main-navbar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.2);
}

.main-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-megamenu .dropdown-menu {
    border-radius: 0;
    border: none;
    width: 100%;
    left: 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    padding: 2rem 0;
    min-width: 992px;
}

.megamenu-title {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
    text-decoration: none;
    padding: 0px 0px 15px 0px;
}

.megamenu-product-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px;
    text-decoration: none;
    color: var(--dark-text);
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.megamenu-product-card:hover {
    background-color: #f8f9fa;
    color: var(--accent-color);
}

.megamenu-product-card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.icones-menu {
    height: 30px !important;
    margin-right: 10px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.megamenu-title:hover .icones-menu {
    transform: translateY(-4px) scale(1.2);
}


/* =============================================
   3. RODAPÉ
   ============================================= */
.site-footer {
    background-color: var(--primary-color);
    color: rgba(255, 255, 255, 0.7);
    padding: 120px 0 0;
    position: relative;
    font-size: 0.95rem;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 35%);
}

.footer-logo {
    max-height: 50px;
    width: auto;
}

.footer-widget-title {
    color: #fff;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.footer-links li,
.footer-contact-info li {
    margin-bottom: 1rem;
}

.footer-links a,
.footer-contact-info a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-links a:hover,
.footer-contact-info a:hover {
    color: #fff;
    padding-left: 5px;
}

.footer-contact-info i {
    color: #fff;
    margin-right: 15px;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    margin-top: 3px;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.social-icon:hover {
    color: #fff;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.social-icon.facebook:hover {
    background-color: #1877F2;
}

.social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-icon.linkedin:hover {
    background-color: #0A66C2;
}

.social-icon.youtube:hover {
    background-color: #FF0000;
}

.footer-bottom-bar {
    padding: 1rem 0;
    margin-top: 80px;
    font-size: 0.9rem;
}

/* =============================================
   4. BANNERS E CAROUSELS (SWIPER)
   ============================================= */

/* --- 4.1 Hero Banner --- */
.hero-banner-industrial {
    background: linear-gradient(120deg, rgba(9, 21, 87, 0.9) 60%, rgba(192, 192, 192, 0.15)), url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1500&q=80');
    background-size: cover;
    background-position: center;
    height: 100vh;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* --- 4.2 Promo Banner --- */
.promo-banner-industrial .text-content h2 {
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--primary-color);
    text-shadow: none;
}

.promo-banner-industrial .text-content p.lead {
    color: #495057;
}

.promo-features {
    font-size: 1.1rem;
    color: #343a40;
}

.promo-features li i {
    color: var(--primary-color);
    margin-right: 10px;
}

.promo-banner-industrial .promo-image img {
    max-height: 60vh;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
    animation: floatAnimation 6s ease-in-out infinite;
}

/* --- 4.3 Carousel de Categorias --- */
.categorias-destaque-industrial {
    position: relative;
    padding: 0 40px;
}
.icon-industrial i{
    font-size: 60px;
    color: #103c64;
}
.category-swiper-container {
    height: 260px;
}

/* --- 4.3 Carousel de Categorias (Ícone azul com hover corrigido) --- */

/* 1. O círculo branco, que serve como container */
.category-industrial-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #fff; /* Garante que o fundo do círculo seja sempre branco */
    border: 2px solid #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    margin: 0 auto;
    position: relative; /* Essencial para posicionar o ícone dentro dele */
}

/* 2. O ícone azul, criado como uma camada por cima com ::before */
.category-industrial-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s ease; /* Transição suave para a cor do ícone */

    /* A cor de fundo desta camada se torna a cor do ícone */
    background-color: #103c64; /* A cor azul solicitada */

    /* O SVG da categoria é usado para mascarar esta camada azul */
    mask-image: var(--category-icon-url);
    mask-size: 60%;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--category-icon-url);
    -webkit-mask-size: 60%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* 3. O efeito de hover original é restaurado e aplicado ao círculo */
.category-industrial-link:hover .category-industrial-circle {
    transform: scale(1.1);
    border-color: var(--primary-color); /* A borda fica azul no hover */
    box-shadow: 0 6px 20px rgba(16, 60, 100, 0.15);
}

/* 4. [OPCIONAL] Também escurecemos o ícone no hover para um efeito extra */
.category-industrial-link:hover .category-industrial-circle::before {
    background-color: #0d2b47; /* Ícone fica azul escuro */
}

/* Regra para o nome da categoria, sem alterações */
.category-industrial-link h6 {
    transition: color 0.3s ease;
    margin-top: 20px;
}

.category-industrial-link:hover h6 {
    color: var(--primary-color);
}



/* --- 4.4 Estilos Comuns de Swiper (Setas, Paginação) --- */
.swiper-wrapper {
    padding-top: 20px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--primary-color) !important;
    top: 64% !important;
    width: calc(0px - (var(--swiper-navigation-size) / 2));
}

.swiper-button-prev {
    left: 0;
}

.swiper-button-next {
    right: 0;
}

.promo-swiper-container:hover .swiper-button-next,
.promo-swiper-container:hover .swiper-button-prev {
    opacity: 1;
}

/* Paginação do Carousel de Categorias */
.categorias-destaque-industrial .swiper-pagination-bullet {
    width: 22px;
    height: 22px;
    background-color: #d0d7de;
    opacity: 1;
    transition: all 0.3s ease;
    margin: 0 5px !important;
    margin-top: 40px !important;
}

.categorias-destaque-industrial .swiper-pagination-bullet-active {
    width: 36px;
    border-radius: 8px;
    background-color: var(--primary-color);
}

/* Paginação do Carousel de Promoções */
.promo-swiper-container .swiper-pagination {
    margin-top: 40px;
}

.promo-swiper-container .swiper-pagination-bullet {
    width: 29px;
    height: 29px;
    background-color: rgba(16, 60, 100, 0.3);
    opacity: 1;
    border-radius: 50%;
    margin: 0 5px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-swiper-container .swiper-pagination-bullet-active {
    width: 32px;
    border-radius: 6px;
    background-color: #103c64 !important;
}


.category-swiper-container .swiper-pagination-bullet {
    width: 29px;
    height: 29px;
    background-color: rgba(16, 60, 100, 0.3);
    opacity: 1;
    border-radius: 50%;
    margin: 0 5px !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-swiper-container .swiper-pagination-bullet-active {
    width: 32px;
    border-radius: 6px;
    background-color: #103c64 !important;
}


/* =============================================
   5. WOOCOMMERCE - GERAL E PÁGINAS
   ============================================= */

/* --- 5.1 Botões e Estilos Gerais --- */
ins {
    background-color: #0e1b4f !important;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    text-decoration: none;
}

.added_to_cart,
.wc-forward {
    background-color: #132468;
    color: #fff;
    padding: 5px 22px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    margin-left: 10px;
    font-size: 11px;
    white-space: nowrap;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button {
    background-color: var(--primary-color);
    color: #fff;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover {
    background-color: #0d2b47;
}

.woocommerce span.onsale {
    background-color: var(--primary-color);
    top: 10em;
    left: 7.5em;
}

.woocommerce p.stars a {
    color: var(--primary-color);
}

/* --- 5.2 Layout da Loja e Arquivos --- */
.container-loja {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.barra-lateral-loja {
    flex: 1 1 280px;
    max-width: 100%;
}

.conteudo-principal {
    flex: 3 1 500px;
}

.woocommerce-breadcrumb {
    font-size: .92em;
    color: var(--primary-color);
    margin: 50px 0 !important;
}

.related,
.produtcts {
    margin-bottom: 50px;
}

/* --- 5.3 Paginação --- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    color: var(--primary-color);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--primary-color);
    color: #fff;
}

/* --- 5.4 Ordenação e Widgets da Sidebar --- */
.woocommerce-ordering {
    position: relative;
}

.woocommerce-ordering .orderby {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 10px 35px 10px 15px;
    font-size: 16px;
    color: #333;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.woocommerce-ordering .orderby:hover {
    border-color: #0073e6;
    background-color: #ffffff;
}

.woocommerce-ordering::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 12px;
    color: #555;
    pointer-events: none;
}

.widget-title {
    margin-top: 50px;
}

.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a {
    display: block;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
}

.widget .wp-block-search__inside-wrapper {
    display: flex !important;
    width: 100%;
}

.widget .wp-block-search__input {
    flex-grow: 1;
    margin: 0 !important;
    height: 48px !important;
    border: 1px solid #ced4da !important;
    border-right-width: 0 !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
}

.widget .wp-block-search__button {
    position: static !important;
    width: 55px !important;
    height: 48px !important;
    margin: 0 !important;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 0 8px 8px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: 0;
}

.widget .wp-block-search__button::before {
    content: '\f002';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    color: #fff;
}

.ui-slider {
    position: relative;
    text-align: left;
    background: #e9e9e9;
    border-radius: 2px;
    height: 8px;
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
    border: 0;
    background: var(--primary-color);
    border-radius: 2px;
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    top: -0.3em;
    margin-left: -0.6em;
    outline: none;
}

.price_slider_amount {
    margin-top: 20px;
    font-size: 0.9em;
}

.price_slider_amount .button {
    background-color: var(--primary-color);
    color: #fff;
    padding: 6px 15px;
    border-radius: 5px;
    text-decoration: none;
    border: none;
    font-weight: bold;
    cursor: pointer;
}

.price_slider_amount .price_label {
    line-height: 2.2em;
}


/* =============================================
   6. WOOCOMMERCE - CARDS DE PRODUTO
   ============================================= */
.product-industrial-card {
    position: relative;
    background: linear-gradient(120deg, #f8f9fa 80%, #C0C0C011 100%);
    border-radius: 1rem;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-industrial-card:hover {
    transform: translateY(-5px);
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-industrial-card .card-title.text-truncate {
    white-space: normal;
    text-wrap: wrap;
    height: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
}

.product-image-wrapper-industrial {
    position: relative !important;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    padding: 30px 30px 0px 0px;
}

.product-image-wrapper-industrial img {
    transition: transform 0.5s;
}

.product-industrial-card:hover img {
    transform: scale(1.08) rotate(0deg);
}

.industrial-card-price .amount,
.industrial-card-price ins .amount {
    color: var(--primary-color);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
}

.industrial-card-price del {
    display: block;
    font-size: 1rem;
    opacity: 0.6;
    color: #6c757d;
}

.industrial-card-price del .amount {
    color: inherit;
    font-weight: normal;
    font-size: inherit;
}

/* --- 6.1 Ações no Hover do Card (Wishlist, Compare, etc.) --- */
.product-image-actions {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.25s ease-in-out;
}

.product-image-wrapper-industrial:hover .product-image-actions {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.product-image-actions .yith-wcwl-add-to-wishlist {
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    /* Sobrescreve outras regras de opacidade */
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
}

.product-image-actions .yith-wcwl-add-to-wishlist-button--anchor,
.product-image-actions .whatsapp-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-image-actions .yith-wcwl-add-to-wishlist-button--anchor:hover,
.product-image-actions .whatsapp-share-icon:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.product-image-actions .yith-wcwl-add-to-wishlist a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-image-actions .yith-wcwl-icon {
    color: var(--primary-color);
    font-size: 1.1rem !important;
}

.product-image-actions .whatsapp-share-icon i {
    color: #0e1b4f;
    font-size: 1.6rem;
}

.yith-wcwl-tooltip,
.yith-wcwl-add-to-wishlist-button span,
.product-image-actions .yith-wcwl-add-to-wishlist span {
    display: none !important;
}

/* =============================================
   7. WOOCOMMERCE - PÁGINA DE PRODUTO
   ============================================= */

/* --- 7.1 Layout e Galeria --- */
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    width: 100%;
}

.woocommerce div.product div.images.woocommerce-product-gallery {
    border: 1px solid var(--primary-color);
    padding: 20px;
    border-radius: 10px;
}

/* --- 7.2 Sumário, Preço e Meta --- */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: var(--primary-color);
}

.sku-info {
    margin-bottom: 20px;
}

.sku {
    font-weight: 800;
}

.product_meta {
    display: flex;
    flex-direction: row;
}

.sku_wrapper {
    margin-bottom: 10px;
    margin-right: 20px;
}

.posted_in a {
    background-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
    padding: 5px;
    border-radius: 5px;
    font-weight: 200;
}

/* --- 7.3 Seletor de Quantidade --- */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
}

.woocommerce div.product form.cart div.quantity {
    display: flex;
    align-items: center;
    gap: 8px;
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto;
}

.quantity .minus,
.quantity .plus,
.quantity input.qty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background-color: #fff !important;
    border: 1px solid #e0e4e8 !important;
    color: var(--primary-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.08) !important;
    font-size: 1.2rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: all 0.2s ease-in-out !important;
    text-align: center !important;
}

.quantity .minus:hover,
.quantity .plus:hover,
.quantity input.qty:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.15) !important;
    outline: none !important;
}

.quantity input.qty {
    font-weight: 700 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- 7.4 Botões de Ação (Comprar, etc) --- */
.woocommerce div.product form.cart .button {
    vertical-align: middle;
    float: left;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    flex-grow: 1;
    text-align: center;
    line-height: 1.5;
}

.woocommerce div.product form.cart .button:hover {
    transform: translateY(-2px);
}

.single_add_to_cart_button:not(.buy-now-button) {
    background-color: #fff !important;
    color: #333 !important;
    
}

.single_add_to_cart_button:not(.buy-now-button):hover {
    background-color: #f2f2f2 !important;
}

.buy-now-button {
    color: #fff !important;
    border: none !important;
}

.buy-now-button:hover {
    background-color: #0d2b47 !important;
}

/* --- 7.5 Wishlist e Compare (Consolidação Final) --- */
/* Esconde instâncias duplicadas que os plugins inserem automaticamente */
.summary.entry-summary>.yith-wcwl-add-to-wishlist,
div.summary>.yith-wcwl-add-to-wishlist,
div.summary>.compare,
div.summary>.compare-button {
    display: none !important;
}

/* Estiliza os botões que estão dentro do nosso container manual */
.summary .yith-wcwl-add-to-wishlist-button,
.summary .compare-button-wrapper .compare-button {
    display: inline-flex !important;
    align-items: center;
    margin-right: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.summary .yith-wcwl-add-to-wishlist-button a,
.summary .compare-button-wrapper .compare-button {
    color: var(--dark-text, #444) !important;
    text-decoration: none;
    font-weight: 500;
    gap: 8px;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

.summary .yith-wcwl-add-to-wishlist-button a:hover,
.summary .compare-button-wrapper .compare-button:hover {
    color: var(--primary-color) !important;
}

.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--single.yith-wcwl-add-to-wishlist-button--anchor,
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button) svg.yith-wcwl-add-to-wishlist-button-icon {
    color: var(--primary-color);
}

/* --- 7.6 Abas de Informação --- */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0px -20px 1.618em;
    border-bottom: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background-color: #e9e6ed;
    color: #515151;
    display: inline-block;
    position: relative;
    z-index: 0;
    border-radius: 4px 4px 0 0;
    margin: 0px 6px;
    padding: 4px 2em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--primary-color);
    color: #fff;
    z-index: 2;
    border-bottom-color: var(--primary-color);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    border: none;
    box-shadow: none;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #fff;
}

.woocommerce-tabs ul.tabs li a {
    font-weight: 700;
}


/* =============================================
   8. WOOCOMMERCE - PÁGINA DA WISHLIST
   ============================================= */
table.wishlist_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    background-color: transparent;
    box-shadow: none;
    border: none;
    margin: 2rem 0;
}

table.wishlist_table td {
    border: none !important;
    padding: 20px 25px;
    vertical-align: middle;
}

table.wishlist_table thead {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

table.wishlist_table tbody tr {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

table.wishlist_table tbody tr:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 24px rgba(var(--primary-rgb), 0.12);
    z-index: 10;
    position: relative;
}

table.wishlist_table td:first-child {
    border-radius: 12px 0 0 12px;
}

table.wishlist_table td:last-child {
    border-radius: 0 12px 12px 0;
}

table.wishlist_table td.product-remove .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #dc3545;
    font-size: 1.3rem;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #f8d7da;
    border-radius: 50%;
    transition: all 0.3s ease;
}

table.wishlist_table td.product-remove .remove:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
    transform: scale(1.1) rotate(90deg);
}

table.wishlist_table td.product-thumbnail img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

table.wishlist_table td.product-name a {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-color);
    text-decoration: none;
}

table.wishlist_table .stock {
    padding: 7px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

table.wishlist_table .in-stock {
    background-color: #198754;
}

table.wishlist_table .out-of-stock {
    background-color: #6c757d;
}

table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax {
    background: transparent;
    color: #132468;
    font-weight: bold;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-width: 200px;
    min-height: 41px;
}

table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax:hover {
    color: #0e1b4f;
}

table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax.loading {
    background-color: #ffffff !important;
    color: transparent !important;
    cursor: wait;
}

table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax.loading>i,
table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax.loading>span {
    visibility: hidden;
}

table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax .cart-loader-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(16, 60, 100, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    animation: spin-wishlist 0.8s linear infinite;
    display: none;
}

table.wishlist_table td.product-add-to-cart a.add-to-cart-ajax.loading .cart-loader-2 {
    display: block;
}

/* =============================================
   9. ANIMAÇÕES E LOADERS
   ============================================= */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-wishlist {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    15% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatAnimation {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes wishlist-heartbeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.22);
    }

    28% {
        transform: scale(0.92);
    }

    42% {
        transform: scale(1.12);
    }

    70% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1);
    }
}

.cart-loader-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    animation: spin 0.8s linear infinite;
    background: transparent !important;
    display: none;
    z-index: 2;
}

.btn-industrial {
    position: relative;
    background: transparent;
    color: #132468;
    font-weight: bold;
    padding: 8px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.btn-industrial:hover {
    color: #0e1b4f;
}

.btn-industrial i {
    transition: transform 0.2s ease-in-out;
}

.btn-industrial:hover i {
    transform: scale(1.25);
}

/* ===================================================================
   CORREÇÃO DO LOADER DO BOTÃO AJAX
   =================================================================== */

/* Ajusta o posicionamento do loader para ser mais estável, evitando o "pulo" */
.btn-industrial .cart-loader-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    /* Metade da altura (negativa) */
    margin-left: -11px;
    /* Metade da largura (negativa) */
    transform: none;
    /* Remove o transform que causava o conflito */
}

/* Mostra o loader quando o botão estiver no estado 'loading' */
.btn-industrial.loading .cart-loader-2 {
    display: block;
}

/* Esconde o ícone e o texto originais, mantendo o tamanho do botão */
.btn-industrial.loading>i,
.btn-industrial.loading>span {
    visibility: hidden;
}

/* Garante que o loader do formulário de busca continue funcionando como antes */
.header-search .search-form.loading .search-submit i {
    visibility: hidden;
}

.header-search .search-form.loading .search-submit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.header-search .search-form.loading .search-submit i {
    visibility: hidden;
}

.header-search .search-form.loading .search-submit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Animações de entrada para o banner promocional */
.swiper-slide-active .text-content h2 {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.swiper-slide-active .text-content p.lead {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.swiper-slide-active .promo-features {
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

.swiper-slide-active .btn-whatsapp-animated {
    animation: fadeInUp 0.6s ease-out 0.8s both;
}

.swiper-slide-active .promo-image {
    animation: fadeInRight 0.8s ease-out 0.3s both;
}


/* =============================================
   10. MEDIA QUERIES E RESPONSIVO
   ============================================= */
@media (max-width: 768px) {

    .main-navbar {
        padding: 10px 10px 10px 0px;
    }

    .container-loja {
        flex-direction: column;
    }

    table.wishlist_table,
    table.wishlist_table tbody,
    table.wishlist_table tr,
    table.wishlist_table td {
        display: block;
        width: 100%;
        text-align: right;
    }

    table.wishlist_table {
        border-spacing: 0;
        margin-top: 1rem;
    }

    table.wishlist_table tbody tr:hover {
        transform: none;
        box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.06);
    }

    table.wishlist_table tr {
        margin-bottom: 20px;
        position: relative;
        padding-top: 50px;
    }

    table.wishlist_table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 15px;
        border-bottom: 1px solid #f0f0f0;
        border-radius: 0;
    }

    table.wishlist_table td:last-of-type {
        border-bottom: none;
    }

    table.wishlist_table td:before {
        content: attr(data-title);
        font-weight: 600;
        text-align: left;
        color: #333;
    }

    table.wishlist_table td.product-remove {
        position: absolute;
        top: 8px;
        right: 8px;
        border: none;
        padding: 0;
        width: auto;
    }

    table.wishlist_table td.product-remove:before,
    table.wishlist_table td.product-thumbnail:before,
    table.wishlist_table td.product-name:before,
    table.wishlist_table td.product-add-to-cart:before {
        display: none;
    }

    table.wishlist_table td.product-thumbnail,
    table.wishlist_table td.product-name {
        justify-content: center;
        border: none;
        padding-top: 0;
    }

    table.wishlist_table td.product-name a {
        text-align: center;
        font-size: 1.2rem;
    }

    table.wishlist_table td.product-add-to-cart {
        justify-content: center;
        padding: 15px;
    }

    table.wishlist_table td.product-add-to-cart a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button).yith-wcwl-add-to-wishlist-button--added svg.yith-wcwl-add-to-wishlist-button-icon {
    color: #ed0000;
}

/* =============================================
   BOTÕES ANIMADOS DO BANNER (WHATSAPP)
   ============================================= */
.btn-whatsapp-animated {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* Espaço entre o ícone e o texto */
    background-color: var(--primary-color);
    /* Cor de fundo primária (#103c64) */
    color: #ffffff !important;
    /* Cor do texto branca */
    padding: 14px 28px;
    border-radius: 50px;
    /* Deixa o botão mais arredondado */
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Efeito ao passar o mouse por cima do botão */
.btn-whatsapp-animated:hover {
    background-color: #0d2b47;
    /* Tom de azul um pouco mais escuro para o hover */
    transform: translateY(-3px);
    /* Efeito sutil de elevação */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Estilo e transição para o ícone */
.btn-whatsapp-animated i {
    font-size: 1.5rem;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Animação do ícone ao passar o mouse */
.btn-whatsapp-animated:hover i {
    transform: scale(1.2) rotate(10deg);
}

/* =============================================
   11. SEPARADORES DE SEÇÃO (VERSÃO FINAL COM CORREÇÃO DE SOBREPOSIÇÃO)
   ============================================= */

/* Regra de segurança para garantir que a página não tenha rolagem horizontal */
html, body {
    overflow-x: hidden !important;
}

/* Regra principal da seção */
.section-divider,
.section-divider-2 {
    position: relative; /* Mantém o contexto para os elementos internos */
    padding: 110px 0px 70px 0px;
}

/* Pseudo-elemento ::after para criar o FUNDO de largura total */
.section-divider::after,
.section-divider-2::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2; /* Alterado: Joga o fundo para a camada mais profunda */
}

/* Define a cor de fundo para cada tipo de seção */
.section-divider::after {
    background: linear-gradient(180deg, rgba(242, 242, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.section-divider-2::after {
    background: linear-gradient(180deg, rgb(16 60 100) 0%, rgb(11 40 67) 100%);
}

/* Pseudo-elemento ::before para criar a "onda" branca no topo */
.section-divider::before,
.section-divider-2::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;
    clip-path: ellipse(75% 100% at 50% 0%);
    z-index: -1; /* Alterado: Coloca a onda na frente do fundo, mas atrás do conteúdo */
}




.section-divider-2 {
    position: relative;
    background: linear-gradient(180deg, rgb(16 60 100) 0%, rgb(11 40 67) 100%);
    padding: 150px 0px 70px 0px;
    /* As 3 linhas abaixo foram removidas para corrigir o alinhamento */
    /* width: 100vw; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    box-sizing: border-box;
}
/* Este pseudo-elemento cria a "onda" branca no topo da seção */
.section-divider-2::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #fff;

    /* CORREÇÃO: Posicionamos a elipse no topo (0%) em vez de no fundo (100%) */
    clip-path: ellipse(75% 100% at 50% 0%);
    /* <--- LINHA CORRIGIDA */
}

/* =============================================
   12. TÍTULOS DE SEÇÃO ESTILIZADOS (VERSÃO COM ANIMAÇÃO AVANÇADA)
   ============================================= */

/* --- Animação Keyframes para a linha decorativa --- */
@keyframes line-bounce-effect {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 110px; /* A linha se estica um pouco além do seu tamanho final */
    opacity: 1;
  }
  70% {
    width: 60px; /* Ela recua ("bate") para um tamanho menor */
  }
  100% {
    width: 70px; /* A linha estabiliza em seu tamanho final */
    opacity: 1;
  }
}

.wishlist_table .btn-industrial i {
    transition: all 0.3s ease-in-out; /* Adicionado para suavizar a transição */
    margin-right: 7px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #103c64;
    /* Garanta que a cor e o fundo iniciais estejam definidos, se necessário */
    background-color: transparent; /* ou #fff, por exemplo */
    color: #103c64;
}

.wishlist_table .btn-industrial:hover i {
    background-color: #103c64;
    color: #fff;
    transform: none;
}

/* --- Container principal do título --- */
.section-divider h2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 auto 4rem auto;
    padding-bottom: 20px;
    cursor: default; /* Melhora a experiência do usuário ao indicar que não é clicável */
}

/* --- Ícone que acompanha o título --- */
.section-divider h2 i {
    color: var(--primary-color);
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    margin-right: 15px;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Efeito de hover no título para animar o ícone --- */
.section-divider h2:hover i {
    transform: rotate(360deg);
}

/* --- Linha decorativa principal (a mais grossa) --- */
.section-divider h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px; /* Estado final da largura */
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
    transition: width 0.4s ease-out; /* Transição suave para o estado de repouso */
}

/* --- Linha decorativa secundária (a mais fina e comprida) --- */
.section-divider h2::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0); /* Começa invisível/sem largura */
    transform-origin: center; /* Garante que a linha cresça a partir do centro */
    width: 150px;
    height: 1px;
    background-color: #dee2e6;
    z-index: -1;
    transition: transform 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335); /* Transição para crescer */
}


/* --- Gatilho das animações no HOVER --- */

/* Aciona a animação de "ricochete" na linha principal */
.section-divider h2:hover::after {
    animation: line-bounce-effect 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Faz a linha fina crescer a partir do centro */
.section-divider h2:hover::before {
    transform: translateX(-50%) scaleX(1);
}
/* =============================================
   13. ALINHAMENTO DOS ÍCONES NO BANNER
   ============================================= */

/* Transforma cada item da lista em um container flexível */
.promo-features li {
    display: flex; /* Ativa o layout flex */
    align-items: flex-start; /* Alinha o topo do ícone com o topo do texto */
    margin-bottom: 0.75rem; /* Adiciona um espaço entre os itens */
}

/* Estiliza o ícone e controla seu espaçamento */
.promo-features li .fa-check-circle {
    color: var(--primary-color); /* Garante a cor correta */
    margin-right: 12px; /* Espaço fixo entre o ícone e o texto */
    margin-top: 5px; /* Pequeno ajuste para alinhar melhor com a linha do texto */
    font-size: 1.1rem; /* Tamanho do ícone */
}


/*
==============================================
  14. ESTILO PARA PLACEHOLDER DE IMAGEM COM ÍCONE
==============================================
*/

/* * Wrapper para o nosso ícone de placeholder.
 * Ele garante que o ícone ocupe o espaço da imagem e seja centralizado.
*/
.wc-icon-placeholder-wrapper {
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #f0f2f5;
    border-radius: inherit;
    aspect-ratio: 1 / 1;
}

/* * Estilo do ícone em si.
*/
.wc-icon-placeholder-wrapper i {
    font-size: 60px; /* Tamanho do ícone */
    color: #a0a5b1; /* Cor do ícone */
}

/* * Garante que o wrapper se ajuste bem dentro do card de produto.
*/
.product-image-wrapper-industrial .wc-icon-placeholder-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
}
/*
==============================================
  15. CORREÇÃO PARA IMAGENS COM FUNDO TRANSPARENTE
==============================================
*/

/* Adiciona um fundo branco e uma borda sutil à área da imagem */
.product-image-wrapper-industrial {
    background-color: #ffffff;
    border-bottom: 1px solid #f2f2f2;
    padding: 20px; /* reajusta o padding para a imagem respirar */
    height: 240px; /* Define uma altura fixa para alinhar todos os cards */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Garante que a imagem se ajuste corretamente sem distorcer */
.product-image-wrapper-industrial img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Essencial para não cortar a imagem */
}
/*
===================================================================
   16. AJUSTES AVANÇADOS DO MINI-CARRINHO (MINICART)
===================================================================
*/

/* 1. Transforma o container principal do minicart em um layout flexível vertical
 * e define uma altura máxima para que a barra de rolagem apareça quando necessário.
*/
.widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    max-height: 500px; /* Altura máxima antes de a rolagem ser ativada. Ajuste se necessário. */
    height: 100%;
}

/* 2. Faz com que a lista de produtos ocupe o espaço disponível e ativa
 * a rolagem vertical (overflow) apenas para esta lista.
*/
.woocommerce-mini-cart {
    flex-grow: 1; /* Permite que a lista cresça para preencher o espaço */
    overflow-y: auto; /* Adiciona a barra de rolagem vertical quando o conteúdo excede a altura */
    padding: 1rem !important;
    margin: 0 !important;
    border: none !important;
}

/* 3. Estiliza cada item da lista do carrinho para melhor alinhamento.
*/
.woocommerce-mini-cart-item {
    display: flex;
    align-items: center;
    gap: 15px; /* Espaço entre a imagem e as informações */
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.woocommerce-mini-cart-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* 4. Define o tamanho das imagens dos produtos como thumbnails.
*/
.woocommerce-mini-cart-item img {
    width: 65px !important;
    height: 65px !important;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0; /* Impede que a imagem encolha */
}

/* 5. Garante que o link do título do produto não tenha quebra de linha estranha.
*/
.woocommerce-mini-cart-item > a {
    text-decoration: none;
    font-weight: 600;
    color: var(--dark-text);
    line-height: 1.3;
}
.woocommerce-mini-cart-item > a:hover {
    color: var(--primary-color);
}


/* 6. Posiciona o botão de remover ('x') no final do item.
*/
.woocommerce-mini-cart-item .remove_from_cart_button {
    margin-left: auto; /* Empurra para a direita */
    color: #b0b0b0;
    font-size: 1.4rem;
    text-decoration: none;
    transition: color 0.2s ease;
}
.woocommerce-mini-cart-item .remove_from_cart_button:hover {
    color: #dc3545;
    background: none !important;
}

/* 7. Cria o 'rodapé' fixo para o subtotal e os botões.
 * Esta parte NÃO fica dentro da área de rolagem.
*/
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__buttons {
    padding: 1rem 1rem;
    margin: 0;
    flex-shrink: 0; /* Impede que o rodapé encolha */
    background-color: #f8f9fa; /* Cor de fundo sutil para o rodapé */
}

.woocommerce-mini-cart__total {
    border-top: 1px solid #e9ecef;
    font-size: 1.1rem;
    font-weight: 700;
}

.woocommerce-mini-cart__buttons {
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    padding-top: 0; /* Remove o espaçamento de cima, pois o total já tem */
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

/* 8. Estiliza os botões para ocuparem o espaço igualmente.
*/
.woocommerce-mini-cart__buttons .button {
    flex: 1;
    text-align: center;
    font-weight: 700;
    padding: 12px !important;
    border-radius: 8px !important;
}

/* Botão "Ver carrinho" (estilo secundário) */
.woocommerce-mini-cart__buttons .button:not(.checkout) {
    background-color: #fff !important;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
}

/* Botão "Finalizar compra" (estilo primário) */
.woocommerce-mini-cart__buttons .checkout {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

.woocommerce-mini-cart__buttons .checkout:hover {
    background-color: var(--secondary-color) !important;
}
/*
===================================================================
   17. CORREÇÃO - SCROLL VERTICAL E QUEBRA DE LINHA NO MINICART
===================================================================
*/

/* 1. Garante que a lista de produtos tenha APENAS a rolagem vertical
      e impede completamente a rolagem horizontal. */
.woocommerce-mini-cart {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 290px;
}

/* 2. Força a quebra de linha (wrap) nos nomes dos produtos para que eles
      não causem uma largura excessiva. */
.woocommerce-mini-cart-item > a {
    white-space: normal !important;  /* NOVO: Permite que o texto quebre em várias linhas */
    word-wrap: break-word !important; /* NOVO: Garante a quebra de palavras longas */
    flex-grow: 1; /* Permite que o texto ocupe o espaço disponível */
}

/* 3. Ajuste fino no botão de remover para garantir o alinhamento
      quando o texto do produto tiver múltiplas linhas */
.woocommerce-mini-cart-item .remove_from_cart_button {
    align-self: flex-start; /* Alinha o 'x' ao topo */
    margin-top: 5px;
}
.woocommerce-Price-amount, .amount bdi{
    color: #103c64;

}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)):where(:not(.edit-post-visual-editor)) .woocommerce input.button {
    font-size: 10px;
}

/* =============================================
   18. AJUSTES RESPONSIVOS PARA O CABEÇALHO (COM LOGO CENTRALIZADO)
   ============================================= */

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaçamento entre os ícones mobile */
}

.mobile-header-actions .header-action-item i {
    font-size: 1.8rem; /* Tamanho dos ícones mobile */
    color: var(--primary-color);
}

.mobile-header-actions .header-action-item .cart-count {
    top: -8px;
    right: -12px;
}

/* Esconde as 'bolinhas' de texto abaixo dos ícones no mobile */
.mobile-header-actions .dropdown-toggle::after {
    display: none;
}


/* Media Query para telas menores que 992px (tablets e celulares) */
@media (max-width: 991.98px) {
    
    /* 1. Configura o container para espaçar os itens */
    .main-header .d-flex {
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    /* 2. O logo cresce para ocupar o centro e centraliza seu conteúdo */
    .header-logo {
        flex-grow: 1;
        text-align: center;
    }

    /* 3. Define um tamanho fixo para os ícones e ANULA a margem automática */
    .mobile-header-actions {
        flex: 0 0 100px; /* Aumentamos para 100px para garantir o espaço */
        justify-content: flex-end;
        margin-top: 0;
        margin-left: 0 !important; /* ESSA É A CORREÇÃO PRINCIPAL: anula o 'ms-auto' */
    }
    
    /* 4. Cria o espaçador invisível da esquerda com a mesma largura */
    .main-header .d-flex::before {
        content: "";
        flex: 0 0 100px; /* A mesma largura de 100px */
    }

    /* Mantém a busca na linha de baixo */
    .header-search {
        order: 3;
        width: 100%;
        margin-top: 15px;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-navbar {
        padding: 10px 10px 10px 0px;
    }
}

/* =============================================
   19. CABEÇALHO MOBILE CORRIGIDO (COM FLEXBOX)
   ============================================= */

@media (max-width: 991.98px) {
    /* Centraliza o logo e ajusta a busca como antes */
    .main-header .d-flex {
        justify-content: center;
    }
    .header-search {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }

    /* 1. Transforma o container da barra de navegação em um flex container que permite quebra de linha */
    .main-navbar .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between; /* Garante espaço entre o botão e os ícones */
    }

    /* 2. Remove o posicionamento absoluto dos ícones e os alinha com margem automática */
    .main-navbar .mobile-header-actions {
        /* Removemos as regras antigas: position, right, top, transform */
        gap: 15px;
        margin-left: auto; /* Empurra os ícones para a direita */
        order: 2; /* Define a ordem de aparição */
    }

    /* 3. Garante que o menu hambúrguer fique na ordem correta */
    .main-navbar .navbar-toggler {
        order: 1; /* Define a ordem de aparição */
    }

    /* 4. Faz o menu expansível ocupar 100% da largura na "linha de baixo" */
    .main-navbar .collapse.navbar-collapse {
        flex-basis: 100%;
        order: 3; /* Aparece por último, na linha de baixo */
    }

    /* 5. Mantém a cor correta dos ícones na barra de navegação */
    .main-navbar .mobile-header-actions .header-action-item i {
        color: #ffffff !important;
        font-size: 1.7rem;
    }

    /* 6. Estilo das notificações */
    .main-navbar .mobile-header-actions .header-action-item .cart-count {
        background-color: #dc3545 !important; /* Cor vermelha para destaque */
        color: #ffffff !important;
        border: 1px solid #ffffff;
    }
}

/* =============================================
   20. CORREÇÃO DA ANIMAÇÃO DA LISTA DE DESEJOS
   ============================================= */

/* 1. Remove a animação contínua do ícone da lista de desejos no cabeçalho */
.site-header .header-action-item[href*="wishlist"] {
    animation: none !important;
}

/* 2. Cria uma classe especial para ativar a animação apenas quando necessário */
.wishlist-item-added-animation {
    /* Reutiliza a animação de batida de coração que já existe no seu CSS */
    animation: wishlist-heartbeat 0.8s ease-in-out;
}

/* =============================================
   21. CORREÇÕES FINAIS PARA O MENU MOBILE
   ============================================= */

@media (max-width: 991.98px) {

    /*
     * CORREÇÃO 1: Impede que os ícones desçam ao abrir o menu.
     * Trocamos o ponto de referência do '.container' para a '.main-navbar'.
    */
    .main-navbar {
        position: relative;
    }
    
    .main-navbar .container {
        position: static; /* Remove a referência antiga */
    }

    /*
     * CORREÇÃO 2: Permite que o submenu 'Peças e Acessórios' abra em telas pequenas.
     * Removemos a largura mínima que o impedia de aparecer corretamente.
    */
    .dropdown-megamenu .dropdown-menu {
        min-width: auto; /* Remove a largura mínima de 992px */
        width: 100%;     /* Faz o menu ocupar a largura disponível */
        padding: 1rem;   /* Ajusta o espaçamento interno para mobile */
    }

    /* Ajusta o título dentro do megamenu mobile para melhor visualização */
    .dropdown-megamenu .dropdown-menu .megamenu-title {
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .header-action-item {
    margin: 10px;
}
    .promo-swiper-container .swiper-wrapper {
        height: 680px !important;
    }
.categorias-destaque-industrial .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
}
}

/* =============================================
   22. CORREÇÃO DO SCROLL DO MENU MOBILE
   ============================================= */

@media (max-width: 991.98px) {
    /*
     * Define uma altura máxima para o menu expansível e ativa a rolagem.
    */
    .navbar-collapse {
        max-height: 70vh; /* O menu ocupará no máximo 70% da altura da tela */
        overflow-y: auto; /* Adiciona a barra de rolagem vertical QUANDO necessário */
    }

    /*
     * Melhora a aparência da barra de rolagem em navegadores WebKit (Chrome, Safari).
     * Este passo é opcional, mas deixa o design mais refinado.
    */
    .navbar-collapse::-webkit-scrollbar {
        width: 8px;
    }

    .navbar-collapse::-webkit-scrollbar-track {
               background: rgba(255, 255, 255, 0.1); /* Cor de fundo da trilha */
        border-radius: 4px;
    }

    .navbar-collapse::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3); /* Cor da barra de rolagem */
        border-radius: 4px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
}

/* --- ESTILIZAÇÃO GERAL DO CARRINHO --- */

/* Remove a aparência de tabela tradicional */
.woocommerce .shop_table.cart {
    border: none;
    border-collapse: separate;
    border-spacing: 0 20px; /* Espaçamento vertical entre os itens (cards) */
}

/* Esconde o cabeçalho da tabela em desktops (vamos usar labels nos cards) */
.woocommerce .shop_table.cart thead {
    display: none;
}

/* Transforma cada linha de produto em um card */
.woocommerce .cart_item {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px; /* Garante o espaçamento */
    padding: 15px;
    transition: all 0.3s ease-in-out;
}

.woocommerce .cart_item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* --- ESTILIZAÇÃO DAS CÉLULAS DO CARD --- */

/* Remove bordas das células */
.woocommerce .shop_table td {
    border: none;
    padding: 10px 15px;
}

/* Imagem do produto */
.woocommerce .cart_item .product-thumbnail img {
    width: 90px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Nome do produto */
.woocommerce .cart_item .product-name a {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    text-decoration: none;
}

/* Preço e Subtotal */
.woocommerce .cart_item .product-price,
.woocommerce .cart_item .product-subtotal {
    font-size: 1.1em;
    font-weight: 700;
    color: #2c5e31;
}

/* Campo de quantidade */
.woocommerce .cart_item .quantity .input-text {
    border-radius: 8px;
    border: 1px solid #ddd;
    box-shadow: none;
    padding: 8px;
    width: 60px;
    text-align: center;
}

/* Botão de remover item */
.woocommerce a.remove {
    font-size: 24px !important;
    color: #e0e0e0 !important;
    background-color: transparent !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 28px !important;
    text-align: center;
    transition: all 0.3s ease;
}

.woocommerce a.remove:hover {
    color: #ffffff !important;
    background-color: #e74c3c !important;
    transform: scale(1.1) rotate(90deg);
}

/* --- ÁREA DE CUPOM E TOTAIS --- */

/* Alinha os botões e campo de cupom */
.woocommerce .actions {
    padding-top: 20px;
}

.woocommerce .coupon, .woocommerce .actions > .button {
    margin-bottom: 15px;
}

/* Bloco de totais */
.cart-collaterals .cart_totals {
    background: linear-gradient(120deg, #f8f9fa 80%, #C0C0C011 100%);
    box-shadow: 0 4px 25px rgba(16,60,100,0.08);
    border-radius: 16px;
    padding: 36px 32px;
    margin-top: 30px;
    transition: box-shadow 0.3s;
}

.cart-collaterals .cart_totals:hover {
    box-shadow: 0 8px 40px rgba(16,60,100,0.16);
}

/* --- MELHORIA VISUAL DO CAMPO DE CUPOM --- */
.woocommerce .coupon input.input-text {
    border-radius: 50px;
    border: 1px solid #ced4da;
    padding: 12px 22px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.woocommerce .coupon input.input-text:focus {
    border-color: #103c64;
    outline: none;
}

/* --- MELHORIA VISUAL DOS TOTAIS DO CARRINHO --- */
.cart-collaterals .cart_totals {
    background: linear-gradient(120deg, #f8f9fa 80%, #C0C0C011 100%);
    box-shadow: 0 4px 25px rgba(16,60,100,0.08);
    border-radius: 16px;
    padding: 36px 32px;
    margin-top: 30px;
    transition: box-shadow 0.3s;
}

.cart-collaterals .cart_totals:hover {
    box-shadow: 0 8px 40px rgba(16,60,100,0.16);
}

/* --- MELHORIA VISUAL DOS CARDS DE PRODUTO NO CARRINHO --- */
.woocommerce .cart_item {
    border-left: 6px solid #103c64;
    box-shadow: 0 4px 25px rgba(16,60,100,0.06);
    transition: box-shadow 0.3s, border-color 0.3s;
}

.woocommerce .cart_item:hover {
    border-left: 6px solid #ffc107;
    box-shadow: 0 8px 32px rgba(16,60,100,0.13);
}

/* --- BOTÕES DO CARRINHO --- */
.woocommerce .actions > .button,
.woocommerce .coupon button.button,
.woocommerce-cart .cart-collaterals .button,
.woocommerce-cart .cart-collaterals .checkout-button,
.woocommerce-cart .cart-collaterals .button.alt {
    background: linear-gradient(90deg, #103c64 60%, #1c3379 100%);
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 14px 36px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    box-shadow: 0 4px 18px rgba(16,60,100,0.10);
    transition: background 0.3s, color 0.3s, transform 0.2s, box-shadow 0.3s;
    position: relative;
    overflow: hidden;
}

.woocommerce .actions > .button:hover,
.woocommerce .coupon button.button:hover,
.woocommerce-cart .cart-collaterals .button:hover,
.woocommerce-cart .cart-collaterals .checkout-button:hover,
.woocommerce-cart .cart-collaterals .button.alt:hover {
    background: linear-gradient(90deg, #1c3379 60%, #103c64 100%);
    color: #ffc107 !important;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 32px rgba(16,60,100,0.18);
}

.woocommerce .actions > .button:active,
.woocommerce .coupon button.button:active,
.woocommerce-cart .cart-collaterals .button:active,
.woocommerce-cart .cart-collaterals .checkout-button:active,
.woocommerce-cart .cart-collaterals .button.alt:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(16,60,100,0.10);
}

/* Ícone animado opcional para botões (adicione <i class="fas fa-shopping-cart"></i> no HTML se quiser) */
.woocommerce .actions > .button i,
.woocommerce .coupon button.button i,
.woocommerce-cart .cart-collaterals .button i,
.woocommerce-cart .cart-collaterals .checkout-button i {
    margin-right: 10px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.woocommerce .actions > .button:hover i,
.woocommerce .coupon button.button:hover i,
.woocommerce-cart .cart-collaterals .button:hover i,
.woocommerce-cart .cart-collaterals .checkout-button:hover i {
    transform: scale(1.2) rotate(-10deg);
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    display: block;
    line-height: 1.4;
    max-width: max-content;
    color: #103c64;
    text-decoration: none;
    font-weight: 500;
}

body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button:not(.is-link) {
    min-height: 3em;
    background-color: #103c64;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
}
.wc-block-cart__submit-button:hover {
     background-color: #0b2e50;
}

/* =============================================
   23. AJUSTE RESPONSIVO - PAGINAÇÃO DO CARROSSEL DE CATEGORIAS
   ============================================= */
@media (max-width: 768px) {

    /* Altera o indicador ativo para um retângulo arredondado em telas menores */
    .categorias-destaque-industrial .swiper-pagination-bullet-active {
        width: 16px;
        /* Largura ligeiramente maior que a altura */
        height: 12px;
        /* Mesma altura do indicador inativo */
        border-radius: 6px;
        /* Bordas suavemente arredondadas */
    }
}

/* =============================================
   CORREÇÃO DE CONFLITO PARA O BANNER SWIPER
   ============================================= */

/* Garante que o container principal esconda os slides que não estão ativos */
.promo-swiper-container {
    overflow: hidden !important;
    opacity: 1 !important; /* Garante que o carrossel não fique invisível */
}

/* Força o alinhamento horizontal dos slides */
.promo-swiper-container .swiper-wrapper {
    display: flex !important;
}

/* Define o tamanho e comportamento de cada slide */
.promo-swiper-container .swiper-slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    height: auto !important;
    opacity: 0 !important; /* Esconde o slide por padrão para o efeito fade */
    transition: opacity 0.6s ease !important; /* Adiciona uma transição suave */
    position: relative;
}

/* Regra mais importante: Mostra APENAS o slide que está ativo */
.promo-swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

.category-swiper-container,
.promo-swiper-container,
.swiper-container {
    max-width: 100%;
    overflow: hidden;
}
.swiper-wrapper {
    max-width: 100vw;
}


/* =================================================================== */
/* BOTÃO DE LOGIN COM ANIMAÇÃO DE HOVER SUAVIZADA E PROFISSIONAL      */
/* =================================================================== */

/* --- Estado base do botão --- */
.woocommerce-account .woocommerce-form-login .button {
    background-color: #1d2c3b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 16px;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Essencial para o ícone não vazar */
    -webkit-tap-highlight-color: transparent; /* Remove flash azul em mobile */

    /* A MÁGICA ESTÁ AQUI: Definimos a transição para cada propriedade */
    transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

/* --- Ícone de seta (estado base) --- */
.woocommerce-account .woocommerce-form-login .button::after {
    content: '→';
    font-size: 24px;
    line-height: 0; /* Alinha melhor o ícone verticalmente */
    position: absolute;
    top: 50%;
    right: 25px; /* Posição final do ícone */

    /* Estado inicial: invisível e levemente deslocado para a direita */
    opacity: 0;
    transform: translate(10px, -50%); /* O -50% no Y é para centralização vertical perfeita */
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Transição suave para o ícone */
}

/* --- Estado de HOVER (quando o mouse está em cima) --- */
.woocommerce-account .woocommerce-form-login .button:hover {
    background-color: #007bff; /* Muda para o azul vibrante */
    transform: translateY(-3px); /* Efeito sutil de elevação */
    box-shadow: 0 8px 20px -5px rgba(0, 123, 255, 0.4);
}

/* Animação do ícone no HOVER */
.woocommerce-account .woocommerce-form-login .button:hover::after {
    /* Estado final: visível e na posição correta */
    opacity: 1;
    transform: translate(0, -50%);
}

/* =================================================================== */
/* ESTILIZAÇÃO PROFISSIONAL PARA LOGIN/REGISTRO WOOCOMMERCE             */
/* =================================================================== */

/* Container geral para os formulários de login e registro */
.woocommerce-account .u-columns.col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas de tamanho igual */
    gap: 50px; /* Espaço entre as colunas */
    align-items: flex-start;
}

/* Estilo individual para cada caixa (Login e Registro) */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    width: 100% !important; /* Sobrescreve a largura padrão */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}

/* Títulos "Entrar" e "Registrar" */
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
    text-align: center;
}

/* Estilo dos campos de formulário (input) */
.woocommerce-account .form-row .input-text {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px;
    width: 100%;
    transition: all 0.3s ease;
    background-color: #f9f9f9;
}

/* Efeito de foco nos campos de formulário */
.woocommerce-account .form-row .input-text:focus {
    border-color: #007bff; /* Usa a cor primária */
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    outline: none;
}

/* Estilo dos labels (Nome de usuário, Senha, etc.) */
.woocommerce-account .form-row label {
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

/* Estilização do botão "Acessar" e "Registrar" */
.woocommerce-account .woocommerce-form-login .button, .woocommerce-account .woocommerce-form-register .button {
    background-color: #103c64;
    color: #fff;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: bold;
    border: none;
    width: 100%;
    margin-top: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    cursor: pointer;
}

.woocommerce-account .woocommerce-form-login .button:hover, .woocommerce-account .woocommerce-form-register .button:hover {
    background-color: #0b2e4f;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Checkbox "Lembre-me" */
.woocommerce-account .form-row .woocommerce-form-login__rememberme {
    font-size: 15px;
    color: #666;
}

/* Link "Perdeu sua senha?" */
.woocommerce-account .lost_password a {
    color: #103c64;}

.woocommerce-account .lost_password a:hover {
    color: #0c2c49;
    text-decoration: underline;
}

/* --- Responsividade para Dispositivos Móveis --- */
@media (max-width: 992px) {
    .woocommerce-account .u-columns.col2-set {
        grid-template-columns: 1fr; /* Coluna única em telas menores */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .woocommerce-account .u-column1,
    .woocommerce-account .u-column2 {
        padding: 25px; /* Menos preenchimento em telas pequenas */
    }

    .woocommerce-account .u-column1 h2,
    .woocommerce-account .u-column2 h2 {
        font-size: 24px;
    }
}

/* =================================================================== */
/* 24. ANIMAÇÃO PROFISSIONAL E ELEGANTE PARA O MEGAMENU              */
/* =================================================================== */

/* 1. Prepara o menu para a animação, deixando-o invisível por padrão */
.dropdown-megamenu .dropdown-menu {
    display: block; /* Essencial para que a animação funcione */
    visibility: hidden; /* Esconde o menu, mas mantém seu espaço */
    opacity: 0; /* Totalmente transparente */
    transform: translateY(20px); /* Desloca o menu 20px para baixo */
    pointer-events: none; /* Impede interações com o menu escondido */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e elegante */
}

/* 2. Ativa a animação quando o mouse passa sobre o item do menu principal */
.dropdown-megamenu:hover > .dropdown-menu {
    visibility: visible; /* Torna o menu visível */
    opacity: 1; /* Totalmente opaco */
    transform: translateY(0); /* Move o menu para sua posição original */
    pointer-events: auto; /* Permite interações com o menu */
}

/* =================================================================== */
/* 25. ANIMAÇÃO PROFISSIONAL PARA O MENU HAMBURGUER (MOBILE)         */
/* =================================================================== */

@media (max-width: 991.98px) {

    /* 1. Animação suave para o ícone do hamburguer */
 .navbar-toggler {
    transition: transform 0.3s ease-in-out;
    border: none; /* Remove a borda para um look mais limpo */
}
.navbar-toggler:focus {
    box-shadow: none; /* Remove o brilho azul ao clicar */
}
.navbar-toggler:not(.collapsed) {
    transform: rotate(90deg);
}

/* --- Animação do Menu Expansível --- */
.navbar-collapse {
    /* A max-height e overflow já estão definidos na regra #22 do seu CSS */
    /* Adicionamos apenas a transição para suavizar a abertura */
    transition: all 0.4s ease-in-out;
}

    /* 3. Define o estado final quando o menu está visível */
    .navbar-collapse.show {
        /*
         * A altura máxima foi movida para uma regra anterior (@media (max-width: 991.98px) .navbar-collapse)
         * para garantir que o scroll funcione. Apenas a opacidade é controlada aqui.
        */
        opacity: 1; /* Torna o conteúdo visível */
    }

    /*
     * CORREÇÃO para a animação de altura funcionar junto com o scroll.
     * Nós removemos max-height da transição e do estado inicial
     * e usamos o que já estava definido na regra 22 do seu CSS.
     * O código acima já foi ajustado, mas esta explicação é para clareza.
    */
}

/* =============================================
   26. ESTILIZAÇÃO E ANIMAÇÃO DOS ÍCONES DE DIFERENCIAIS (CORRIGIDO)
   ============================================= */

/* --- Container do Ícone (Círculo) --- */
.icon-industrial {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    /* A linha abaixo foi removida para usar o fundo padrão, que está branco */
    /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); */
    background-color: #fff; /* Garante o fundo branco visto na imagem */
    border: 2px solid #f0f0f0; /* Adiciona uma borda sutil */
    box-shadow: 0 5px 15px rgba(16, 60, 100, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Estilo do Ícone (dentro do círculo) --- */
.icon-industrial i {
    font-size: 40px;
    color: var(--primary-color); /* CORREÇÃO: Trocado de #ffffff para a cor primária */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Efeito de Hover no Card --- */
.diferencial-hover:hover .icon-industrial {
    border-color: var(--primary-color); /* A borda fica azul no hover */
    box-shadow: 0 12px 25px rgba(16, 60, 100, 0.2);
}

.diferencial-hover:hover i {
    transform: scale(1.15); /* Adicionado para aumentar o ícone em 15% */
    color: var(--secondary-color); /* Opcional: escurece o ícone no hover */
}

/* --- Ajusta o título no hover para acompanhar o destaque --- */
.diferencial-hover {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.diferencial-hover:hover {
    transform: translateY(-5px);
}

/* =============================================
   27. BLOCO PROMOCIONAL PARA PEÇAS A LASER
   ============================================= */

/* --- Estrutura do Grid --- */
.promo-laser-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto; /* Altura se ajusta ao conteúdo */
    gap: 15px;
}

/* --- Coluna dos banners empilhados --- */
.promo-banners-stacked {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* --- Estilo Base dos Banners --- */
.promo-banner-large,
.promo-banner-small {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.1);
    background-color: var(--primary-color);
    width: 100%;
    display: flex;
    align-items: flex-end; /* Alinha o conteúdo na parte inferior */
}

/* O banner grande preenche a altura disponível */
.promo-banner-large {
    height: 100%;
}

/* AQUI ESTÁ A MUDANÇA: Altura fixa para os banners pequenos */
.promo-banner-small {
    height: 145px; /* <<-- ALTURA FIXA E MENOR APLICADA AQUI */
}

/* --- Imagem de Fundo --- */
.promo-banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.promo-banner-large:hover .promo-banner-img,
.promo-banner-small:hover .promo-banner-img {
    transform: scale(1.05);
}

/* --- Conteúdo do Banner (com ajustes) --- */
.promo-banner-content {
    position: relative;
    width: 100%;
    z-index: 2;
    color: #fff;
    background: linear-gradient(to top, rgba(16, 45, 71, 0.95) 0%, rgba(22, 60, 99, 0.7) 60%, transparent 100%);
    padding: 1.5rem; /* Espaçamento interno ajustado */
}

.promo-banner-large .promo-banner-content {
    padding: 2rem; /* Espaçamento um pouco maior para o banner grande */
}

/* --- Textos e Títulos (com ajustes) --- */
.promo-banner-title {
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem;
}

.promo-banner-large .promo-banner-title {
    font-size: 2rem;
}

.promo-banner-small .promo-banner-title {
    font-size: 1.3rem; /* Tamanho reduzido */
}

.promo-banner-text {
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.promo-banner-large .promo-banner-text {
    font-size: 1rem;
}

.promo-banner-small .promo-banner-text {
    font-size: 0.9rem; /* Tamanho reduzido */
    margin-bottom: 0.75rem;
}

/* --- Botão (com ajustes) --- */
.btn-promo-laser {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: all 0.3s ease-in-out;
    padding: 10px 20px;
    font-size: 0.85rem;
}

.btn-promo-laser:hover {
    background-color: #fff;
    color: var(--secondary-color);
    transform: translateY(-2px);
}

/* --- Tarja de Desconto --- */
.discount-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background-color: #103c64;
    color: #fff;
    padding: 8px 40px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 3;
    transform: rotate(45deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-align: center;
}

/* --- Ajustes para Telas Menores (Responsivo) --- */
@media (max-width: 991.98px) {
    .promo-laser-grid {
        grid-template-columns: 1fr;
    }
    .promo-banner-large,
    .promo-banner-small {
        height: 200px; /* <<-- ALTURA UNIFICADA E MENOR PARA MOBILE */
    }
    .promo-banner-content {
        padding: 1.5rem;
    }
    .discount-badge {
        font-size: 0.9rem;
        padding: 6px 35px;
        top: 15px;
        right: -35px;
    }
}



/* =================================================================== */
/* 28. SEÇÃO DE PERGUNTAS FREQUENTES (FAQ) POR PRODUTO               */
/* =================================================================== */

/* --- Container Principal da Seção --- */
.product-faq-section {
    max-width: 900px;
    margin: 0px auto; /* Espaçamento acima e abaixo da seção */
    padding: 20px;
    font-family: 'Poppins', sans-serif;
}

/* --- Título da Seção (Reutilizando e adaptando o estilo do seu site) --- */
.product-faq-section h2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 auto 3rem auto;
    padding-bottom: 20px;
}

.product-faq-section h2 i {
    color: var(--primary-color);
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    margin-right: 15px;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.product-faq-section h2:hover i {
    transform: rotate(360deg);
}

.product-faq-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

/* --- Container do Acordeão --- */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre cada pergunta */
}

/* --- Estilo de Cada Item (Card) --- */
.faq-item {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-left: 5px solid #e9ecef; /* Borda lateral para efeito visual */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.05);
    transition: all 0.3s ease-in-out;
}

/* Efeito Hover no Item */
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.1);
    border-left-color: var(--secondary-color); /* Destaque na borda ao passar o mouse */
}

/* Estilo do Item Ativo (Aberto) */
.faq-item.active {
    border-left-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.1);
}

/* --- Botão da Pergunta --- */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--dark-text);
    text-align: left;
    cursor: pointer;
}

.faq-icon {
    font-size: 1.4rem;
    color: var(--primary-color);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0; /* Impede que o ícone seja esmagado */
    margin-left: 20px;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* --- Container da Resposta (Animação) --- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0 25px;
    color: #495057; /* Cor de texto padrão para parágrafos */
    line-height: 1.7;
}

/* Estado da Resposta Ativa (Aberta) */
.faq-item.active .faq-answer {
    max-height: 200px; /* Altura suficiente para a maioria das respostas */
    opacity: 1;
    padding: 0 25px 20px 25px; /* Adiciona espaçamento inferior ao abrir */
}

/* =============================================
   29. ESTILOS PARA LISTA DE DESEJOS COM SELEÇÃO MÚLTIPLA
   ============================================= */

/* Alinhamento da coluna de checkboxes */
.wishlist_table th.product-checkbox-manual,
.wishlist_table td.product-checkbox-manual {
    width: 40px;
    text-align: center;
    padding-left: 15px !important;
    padding-right: 5px !important;
}

/* Aumenta o tamanho do checkbox para facilitar o clique */
.wishlist_table .product-checkbox-manual input[type="checkbox"] {
    transform: scale(1.4);
    cursor: pointer;
}

/* Container para o botão de ações em massa */
.wishlist-bulk-actions {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e0e4e8;
    text-align: left;
}

/* Estilo do botão de remover selecionados (reutilizando .btn-industrial) */
.wishlist-bulk-actions .btn-industrial {
    background-color: #fbeaea;
    color: #dc3545;
    border: 1px solid #f8d7da;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
}

.wishlist-bulk-actions .btn-industrial:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

/* Animação para quando o botão está carregando */
.wishlist-bulk-actions .btn-industrial.loading {
    cursor: wait;
    color: transparent !important;
    position: relative;
}

.wishlist-bulk-actions .btn-industrial.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid #fff;
    border-top-color: #dc3545;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Animação de remoção da linha da tabela */
.wishlist_table tr.removing {
    transition: opacity 0.4s ease-out;
    opacity: 0;
}