/* NinhoMixStore Custom Styles */

/* Header & Navigation */
.site-header {
    background-color: #FFFFFF;
    padding: 1em 0;
    border-bottom: 1px solid #DEE2E6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* .site-header .container is handled by Bootstrap's .container */

.site-header .container {
    max-width: 1600px;
    padding-left: clamp(10px, 2vw, 40px);
    padding-right: clamp(10px, 2vw, 40px);
}

.site-header__branding {
    display: flex;
    align-items: center;
    margin-right: auto; /* Pushes toggler and nav items to the right on larger screens */
}

.site-header__logo {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.site-header__title a {
    font-size: 1.5rem;
    color: #212529;
    text-decoration: none;
}

.site-header__title a:hover {
    text-decoration: none;
}

/* Styling for Bootstrap .navbar-collapse element */
.navbar-collapse {
    justify-content: flex-end; /* Aligns nav items and search to the right on larger screens */
}

/* Styling for Bootstrap .navbar-nav */
.navbar-nav .nav-item .nav-link {
    padding: 0.5em 0.8em;
    /* color: #007BFF; */ /* Default Bootstrap color or customize via SASS variables */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link.active {
    color: #0056b3; /* Example hover/active color */
    text-decoration: none;
}

/* Search Bar in Header (using Bootstrap classes .d-flex, .form-control, .btn) */
/* .site-header__search is the <form class="d-flex site-header__search"> */
.site-header__search .form-control { /* Target .form-control within .site-header__search */
    font-size: 0.9rem;
    /* margin-right: 0.5rem; /* Bootstrap's .me-2 on input or .ms-2 on button handles this */
    /* border-radius: 20px; */ /* Optional: if you want rounded inputs */
}

/* .site-header__search-button is styled by Bootstrap's .btn */

/* Mobile Nav Toggle - .navbar-toggler */
.navbar-toggler {
    border: none;
    font-size: 1.25rem;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* Important Notice Styling */
.important-notice {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-size: 0.9rem;
    color: #856404;
}

.important-notice p {
    margin-bottom: 0;
}

/* Categories Dropdown Styling - Alinhado com sistema de grid */
.categories-dropdown-area {
    max-width: 300px;
    margin-bottom: 20px;
}

.categories-dropdown-toggle-btn {
    background-color: #007bff;
    color: white;
    font-weight: 600;
    border-radius: 6px;
    padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 15px);
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    transition: all 0.3s ease;
}

.categories-dropdown-toggle-btn:hover {
    background-color: #0069d9;
    transform: translateY(-1px);
}

.categories-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 280px;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.categories-dropdown-menu.open {
    display: block;
}

/* Banner responsivo e alinhado */
.hero-banner-section {
    width: 100%;
    padding: 0;
    margin-top: clamp(0.5rem, 2vw, 1rem);
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
    overflow: hidden;
}

.hero-banner-placeholder {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 clamp(10px, 2vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-banner__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.hero-banner__image {
    width: 100%; /* Faz a imagem preencher o placeholder */
    height: auto; /* Mantém a proporção da imagem */
    display: block;
    /* margin: 0 auto; */ /* Não necessário se a imagem preenche 100% */
    /* border-radius: 8px; */ /* Removido para que o banner vá de ponta a ponta */
}

/* Responsividade do banner */
@media (max-width: 768px) {
    .hero-banner-placeholder {
        transform: scale(1.25); /* Escala aumentada para mobile */
        margin: 0 auto; /* Sem margem negativa */
    }
    
    .hero-banner__image {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
    
    .hero-banner-section {
        padding: 0.5rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .hero-banner-placeholder {
        transform: scale(1.25); /* Escala aumentada para máximo aproveitamento */
        margin: 0 auto; /* Sem margem negativa */
    }
    
    .hero-banner-section {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem;
    }
    
    .hero-banner__image {
        border-radius: 6px; /* Adiciona bordas arredondadas para visual mais moderno */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra sutil para destacar */
    }
}

@media (max-width: 480px) {
    .hero-banner-placeholder {
        transform: scale(1.25); /* Escala aumentada para máxima visibilidade */
        margin: 0 auto; /* Centralizado sem margem negativa */
    }
    
    .hero-banner-section {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        padding: 0.5rem;
    }
    
    .hero-banner__image {
        max-height: 140px; /* Aumentado de 120px para 140px */
        object-fit: contain; /* Mudado para contain para manter proportção sem cortar */
    }
}

/* Featured Products Carousel - Design Inspirado no CodePen com Efeito Ambilight */
.featured-products-section {
    margin: 1.5rem 0;
    padding: 1rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.featured-products-section .container-fluid {
    position: relative;
    z-index: 2;
}

.featured-products-section .section-title {
    color: #2c3e50;
    font-weight: 700;
    font-size: 2.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
    position: relative;
}

.featured-products-section .section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #6c757d, #495057);
    margin: 1rem auto;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

/* CARROSSEL REMOVIDO - Agora usando simple-carousel.css */
.awSlider {
    margin: 10px auto;

/* Pagination Styles */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* General styling for Bootstrap pagination links */
.pagination .page-item .page-link {
    color: #007bff; /* Bootstrap primary blue */
    border: 1px solid #dee2e6; /* Standard Bootstrap border */
    padding: 0.5rem 0.75rem; /* Standard Bootstrap padding */
    margin: 0 2px; /* Adjust margin between page items */
    border-radius: 0.25rem; /* Standard Bootstrap border-radius */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.pagination .page-item .page-link:hover {
    color: #0056b3;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    font-weight: bold;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

.pagination-info {
    margin: 0 15px; /* Keep this for the text info */
    font-size: 0.9rem;
    color: #495057;
    /* Ensure it's properly aligned with the pagination controls */
    display: block; /* Make it a block to sit below pagination on wrap */
    width: 100%; /* Take full width to center text if pagination wraps */
    text-align: center; /* Center the text */
    margin-top: 0.5rem; /* Add some space if it wraps */
}

@media (max-width: 575.98px) {
    .pagination .page-item .page-link {
        padding: 0.375rem 0.55rem; /* Slightly smaller padding for very small screens */
        font-size: 0.8rem;
        margin: 0 1px;
    }
    .pagination-info {
        margin: 5px 10px; /* Allow info to wrap if needed */
        font-size: 0.8rem;
    }
}

/* Search Results Page Specific Styles */
.search-results-body {
    background-color: #f8f9fa; /* Light background for the page */
}

.search-results-page .categories-dropdown-area .categories-dropdown-toggle-btn {
    text-align: left;
}

.search-results-page .refined-search-container {
    max-width: 100%; /* Allow it to take full width on small screens */
}

@media (min-width: 768px) {
    .search-results-page .refined-search-container {
        max-width: 350px;
    }
}

/* .search-results-page .product-listing__grid .product-card-wrapper {
    Ensures cards in the grid on search page have consistent height if needed 
} */

.search-results-page .badge.bg-light {
    border: 1px solid #dee2e6; /* Softer border for the search term badge */
    font-size: 0.9rem;
}

/* Sticky category filter for search results page */
.categories-dropdown-area.sticky-top {
    top: 110px; /* Adjust based on actual sticky header height */
    /* background: #f8f9fa; */ /* Optional: match body background if it overlaps */
    z-index: 900; /* Ensure it's above product cards but below header */
}

/* Footer styling - ensure it's at the bottom */
body.d-flex.flex-column.min-vh-100 .site-footer {
    margin-top: auto;
}

/* Ensure product cards on search results page match homepage/category page */
.product-card {
    border: 1px solid #e9ecef;
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%; /* Important for equal height cards in a row */
}

.product-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}

.product-card .card-img-top {
    width: 100%;
    max-height: 220px; /* Consistent image height */
    object-fit: contain; /* Or use 'cover' if you prefer cropping */
    padding: 1rem;
    background-color: #fff; /* Ensure transparent PNGs have a white background if needed */
}

.product-card .card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows body to expand and push footer down */
}

.product-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
    /* Limit title to 2 lines with ellipsis */
    display: -webkit-box;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;
    line-clamp: 2; 
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.1rem * 1.5 * 2); /* Approx height for 2 lines based on font-size and line-height */
}

.product-card .card-text.small {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 1rem;
    /* Limit description to 3 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(0.85rem * 1.4 * 3); /* Approx height for 3 lines */
    flex-grow: 1; /* Allow description to take available space */
}

.product-card .card-text.fw-bold {
    font-size: 1.25rem;
    color: var(--bs-primary, #007bff);
    margin-bottom: 1rem;
}

.product-card .card-footer {
    background-color: transparent;
    border-top: none; /* Remove default Bootstrap card-footer border */
    padding: 0 1rem 1rem; /* Adjust padding as needed */
}

.product-card .btn-primary {
    background-color: var(--bs-primary, #007bff);
    border-color: var(--bs-primary, #007bff);
    font-weight: 500;
    width: 100%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.product-card .btn-primary:hover {
    background-color: var(--bs-primary-darker, #0056b3); /* Define --bs-primary-darker or use a darker shade */
    border-color: var(--bs-primary-darker, #0056b3);
}

/* Responsive adjustments for product grid on search page */
/* Using the existing .product-listing__grid classes for consistency */
/* Default: 1 column (mobile-first) - handled by row-cols-1 */

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
    /* .product-listing__grid is row-cols-sm-2 in HTML */
}

/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) {
    /* .product-listing__grid is row-cols-md-2 in HTML for search page (3 for others) */
    /* If you want 3 columns on medium for search results like other pages, change HTML to row-cols-md-3 */
}

/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
    /* .product-listing__grid is row-cols-lg-3 in HTML for search page (4 for others) */
    /* If you want 4 columns on large for search results, change HTML to row-cols-lg-4 */
}

/* Extra large devices (extra large desktops, 1200px and up) */
@media (min-width: 1200px) {
    /* Keep as is or adjust if needed */
}

/* Product Detail Page Styles */
.product-page-main {
    padding-top: 20px;
    padding-bottom: 20px;
}

#product-detail-layout-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
    gap: 20px; /* Space between columns */
}

.product-image-column {
    flex: 1 1 100%; /* Full width on small screens */
    max-width: 100%;
}

.product-info-column {
    flex: 1 1 100%; /* Full width on small screens */
    max-width: 100%;
}

@media (min-width: 768px) { /* Medium devices and up */
    .product-image-column {
        flex: 1 1 40%; /* Example: 40% width for image */
        max-width: 40%;
    }

    .product-info-column {
        flex: 1 1 55%; /* Example: 55% width for info, allowing for gap */
        max-width: 55%;
    }
}

.product-detail-main-image {
    width: 100%;
    max-width: 450px; /* Max size for the image */
    height: auto;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 20px; /* Space below image on mobile */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.product-name-main {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.product-pricing-main {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.price-main {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--bs-primary, #007bff);
    margin-right: 10px;
}

.installments-main {
    font-size: 0.9rem;
    color: #555;
}

.best-price-badge {
    display: inline-block;
    padding: 0.3em 0.6em;
    font-size: 0.85em;
    font-weight: bold;
    color: #fff;
    background-color: #28a745; /* Green for best price */
    border-radius: 0.25rem;
    margin-left: 10px;
    vertical-align: middle;
}

.all-store-prices {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.all-store-prices h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.prices-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.prices-list li.store-price {
    padding: 0.5rem 0;
    border-bottom: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping within list item */
}

.prices-list li.store-price:last-child {
    border-bottom: none;
}

.prices-list .store-name {
    font-weight: 500;
    margin-right: 10px;
}

.prices-list .store-price-value {
    font-weight: bold;
    color: #333;
}

.prices-list .best-price-tag {
    font-size: 0.8em;
    font-weight: bold;
    color: #28a745;
    margin-left: 8px;
    padding: 0.2em 0.4em;
    background-color: #e9f5ec;
    border-radius: 3px;
}

.product-info-card {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden; /* Garante que nada escape do card */
}

.product-info-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.product-description-main,
.product-specifications-main {
    overflow-x: auto; /* Adiciona scroll horizontal se necessário */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.product-description-main p,
.product-description-main div { /* Target paragraphs or divs if description is HTML */
    margin-bottom: 0.75rem;
    line-height: 1.6;
}
.product-description-main p:last-child,
.product-description-main div:last-child {
    margin-bottom: 0;
}

/* Garantir que todo conteúdo fica contido nos cards */
.product-info-card {
    /* ...existing code... */
    overflow: hidden; /* Garante que nada escape do card */
    contain: layout; /* CSS Containment para melhor performance */
}

.product-description-main,
.product-specifications-main {
    /* ...existing code... */
    overflow-x: auto; /* Adiciona scroll horizontal se necessário */
    overflow-y: visible; /* Permite expansão vertical natural */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Melhorar responsividade de tabelas dentro dos cards */
.product-description-main table,
.product-specifications-main table {
    width: 100% !important; /* Override inline styles from TinyMCE */
    max-width: 100% !important;
    border-collapse: collapse;
    margin-bottom: 1rem;
    table-layout: fixed; /* Força distribuição proporcional das colunas */
    word-wrap: break-word; /* Quebra palavras longas */
    overflow-wrap: break-word; /* Suporte para navegadores mais novos */
    font-size: inherit; /* Herda o tamanho da fonte do container */
}

/* Wrapper para tabelas grandes com scroll horizontal */
.product-description-main .table-wrapper,
.product-specifications-main .table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.product-description-main .table-wrapper table,
.product-specifications-main .table-wrapper table {
    margin-bottom: 0;
    border: none;
}

.product-description-main table th,
.product-description-main table td,
.product-specifications-main table th,
.product-specifications-main table td {
    border: 1px solid #dee2e6;
    padding: 0.5rem;
    text-align: left;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto; /* Hifenização automática para textos longos */
    width: auto !important; /* Override inline widths do TinyMCE */
    min-width: 60px; /* Largura mínima para prevenir colunas muito pequenas */
    max-width: 300px; /* Largura máxima aumentada para desktop */
    vertical-align: top; /* Alinha conteúdo ao topo da célula */
    font-size: 0.9rem; /* Tamanho de fonte consistente */
    line-height: 1.4; /* Melhora legibilidade */
}

.product-description-main table th,
.product-specifications-main table th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.85rem; /* Headers um pouco menores */
}

/* Evitar que conteúdo muito longo quebre o layout */
.product-description-main table td > *,
.product-specifications-main table td > * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Responsividade para listas dentro de células */
.product-description-main table td ul,
.product-description-main table td ol,
.product-specifications-main table td ul,
.product-specifications-main table td ol {
    margin: 0;
    padding-left: 1.2rem;
    word-wrap: break-word;
}

.product-description-main table td li,
.product-specifications-main table td li {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

/* Container responsivo para tabelas */
.product-description-main > table,
.product-specifications-main > table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.product-description-main > table > tbody,
.product-description-main > table > thead,
.product-specifications-main > table > tbody,
.product-specifications-main > table > thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Responsividade aprimorada para mobile */
@media (max-width: 767.98px) {
    .product-info-card {
        padding: 1rem; /* Reduz padding em mobile */
        margin-bottom: 1rem;
    }
    
    .product-description-main table th,
    .product-description-main table td,
    .product-specifications-main table th,
    .product-specifications-main table td {
        font-size: 0.75rem !important;
        padding: 0.35rem !important;
        max-width: 120px !important; /* Reduz largura máxima em mobile */
        min-width: 50px !important; /* Reduz largura mínima também */
        line-height: 1.3;
    }
    
    /* Para tabelas muito largas, forçar scroll horizontal */
    .product-description-main,
    .product-specifications-main {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling em iOS */
    }
    
    .product-description-main table,
    .product-specifications-main table {
        min-width: 300px; /* Largura mínima para tabelas */
        font-size: 0.75rem !important;
    }
    
    /* Stack table cells vertically em telas muito pequenas se necessário */
    .product-description-main table.mobile-stack,
    .product-specifications-main table.mobile-stack {
        display: block;
        border: none;
    }
    
    .product-description-main table.mobile-stack thead,
    .product-description-main table.mobile-stack tbody,
    .product-description-main table.mobile-stack th,
    .product-description-main table.mobile-stack td,
    .product-description-main table.mobile-stack tr,
    .product-specifications-main table.mobile-stack thead,
    .product-specifications-main table.mobile-stack tbody,
    .product-specifications-main table.mobile-stack th,
    .product-specifications-main table.mobile-stack td,
    .product-specifications-main table.mobile-stack tr {
        display: block;
        width: 100% !important;
        border: none;
        padding: 0.5rem 0;
    }
    
    .product-description-main table.mobile-stack th,
    .product-specifications-main table.mobile-stack th {
        background-color: transparent;
        font-weight: 600;
        border-bottom: 1px solid #dee2e6;
    }
}

/* Para telas muito pequenas (menos de 576px) */
@media (max-width: 575.98px) {
    .product-info-card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .product-description-main table th,
    .product-description-main table td,
    .product-specifications-main table th,
    .product-specifications-main table td {
        font-size: 0.7rem !important;
        padding: 0.25rem !important;
        max-width: 100px !important;
        min-width: 40px !important;
    }
    
    .product-description-main table,
    .product-specifications-main table {
        font-size: 0.7rem !important;
        min-width: 250px;
    }
}

/* Garantir que imagens dentro de descrições também sejam responsivas */
.product-description-main img,
.product-specifications-main img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0.5rem auto;
}

/* Melhorar listas dentro das descrições */
.product-description-main ul,
.product-description-main ol,
.product-specifications-main ul,
.product-specifications-main ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.product-description-main li,
.product-specifications-main li {
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Estilos para texto longo em parágrafos */
.product-description-main p,
.product-specifications-main p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    margin-bottom: 1rem;
}

/* Links responsivos */
.product-description-main a,
.product-specifications-main a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #007bff;
    text-decoration: underline;
}

.product-description-main a:hover,
.product-specifications-main a:hover {
    color: #0056b3;
}

/* ===============================================
   REGRAS PARA GARANTIR CONTEÚDO CONTIDO NOS CARDS
   =============================================== */

/* Garantir que TODOS os elementos ficam contidos nos cards */
.product-info-card * {
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Regras específicas para diferentes tipos de conteúdo */
.product-info-card pre,
.product_info-card code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    overflow-x: auto;
}

.product-info-card iframe,
.product-info-card embed,
.product_info-card object {
    max-width: 100% !important;
    height: auto !important;
}

/* Divisões e containers dentro dos cards */
.product-info-card div,
.product-info-card section,
.product-info-card article {
    max-width: 100% !important;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Links longos */
.product-info-card a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

/* Cabeçalhos longos */
.product-info-card h1,
.product-info-card h2,
.product_info-card h3,
.product_info-card h4,
.product_info-card h5,
.product_info_card h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
}

/* Spans e elementos inline */
.product-info-card span,
.product-info-card strong,
.product-info-card em,
.product_info-card b,
.product_info-card i {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Elementos de formulário se existirem */
.product-info-card input,
.product-info-card textarea,
.product_info-card select {
    max-width: 100% !important;
}

/* Figuras e legendas */
.product-info-card figure,
.product-info-card figcaption {
    max-width: 100% !important;
    margin: 0.5rem 0;
}

/* ============================================
   MELHORIAS ESPECÍFICAS PARA MOBILE
   ============================================ */

@media (max-width: 767.98px) {
    /* Força quebra de palavras em mobile */
    .product-info-card {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Links em mobile */
    .product-info-card a {
        word-break: break-all;
        overflow-wrap: break-word;
    }
    
    /* Textos longos em mobile */
    .product-info-card p,
    .product-info-card div,
    .product-info-card span {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* ============================================
   FALLBACK PARA CONTEÚDO PROBLEMÁTICO
   ============================================ */

/* Se algo ainda estiver escapando, forçar contenção */
.product-info-card {
    contain: layout style;
    isolation: isolate;
}

/* Para elementos absolutamente posicionados dentro dos cards */
.product-info-card [style*="position: absolute"],
.product-info-card [style*="position: fixed"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* Larguras fixas problemáticas */
.product-info-card [style*="width:"],
.product-info-card [style*="min-width:"] {
    max-width: 100% !important;
}

/* ============================================
   OVERRIDE ESPECÍFICO PARA TINYMCE STYLES
   ============================================ */

/* Remove larguras fixas do TinyMCE que podem quebrar o layout */
.product-description-main [style*="width"],
.product-specifications-main [style*="width"] {
    width: auto !important;
    max-width: 100% !important;
}

/* Remove alturas fixas problemáticas */
.product-description-main [style*="height"],
.product-specifications-main [style*="height"] {
    height: auto !important;
}

/* Normalize margins do TinyMCE */
.product-description-main [style*="margin"],
.product-specifications-main [style*="margin"] {
    margin: 0.5rem 0 !important;
}

/* Override de padding problemático */
.product-description-main [style*="padding"],
.product-specifications-main [style*="padding"] {
    padding: 0.5rem !important;
}

/* Elementos com display flex ou grid do TinyMCE */
.product-description-main [style*="display: flex"],
.product-description-main [style*="display: grid"],
.product-specifications-main [style*="display: flex"],
.product-specifications-main [style*="display: grid"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Float elements que podem causar overflow */
.product-description-main [style*="float"],
.product-specifications-main [style*="float"] {
    float: none !important;
    display: block !important;
    max-width: 100% !important;
}

/* Posicionamento absoluto problemático */
.product-description-main [style*="position: absolute"],
.product-description-main [style*="position: fixed"],
.product-specifications-main [style*="position: absolute"],
.product-specifications-main [style*="position: fixed"] {
    position: static !important;
}

/* Override de font-size muito grandes */
.product-description-main [style*="font-size"],
.product-specifications-main [style*="font-size"] {
    font-size: inherit !important;
    line-height: 1.4 !important;
}

/* Tabelas com larguras fixas do TinyMCE */
.product-description-main table[style*="width"],
.product-specifications-main table[style*="width"] {
    width: 100% !important;
    table-layout: fixed !important;
}

.product-description-main table td[style*="width"],
.product-description-main table th[style*="width"],
.product-specifications-main table td[style*="width"],
.product-specifications-main table th[style*="width"] {
    width: auto !important;
}

/* Images com larguras fixas */
.product-description-main img[style*="width"],
.product-specifications-main img[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* ============================================
   RESET ESPECÍFICO PARA CONTEÚDO TINYMCE
   ============================================ */

/* Remove todos os estilos inline problemáticos */
.product-description-main *[style],
.product-specifications-main *[style] {
    box-sizing: border-box !important;
}

/* Garante que elementos de bloco não ultrapassem */
.product-description-main div,
.product-description-main p,
.product-description-main blockquote,
.product-description-main section,
.product-specifications-main div,
.product-specifications-main p,
.product-specifications-main blockquote,
.product-specifications-main section {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
}

/* Para listas que podem ter problemas */
.product-description-main ul,
.product-description-main ol,
.product-specifications-main ul,
.product-specifications-main ol {
    max-width: 100% !important;
    overflow-x: visible !important;
    padding-left: 1.5rem !important;
}

.product-description-main li,
.product-specifications-main li {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ========================================
   SEÇÃO MAIS PRODUTOS - MATRIZ 4 COLUNAS
   ======================================== */

/* Container da seção Mais Produtos */
.more-products-section {
    margin: 2rem 0;
    padding: 2rem 0;
}

.more-products-section .section-title {
    text-align: center;
    margin-bottom: 2rem;
    color: #2c3e50;
    font-weight: 600;
    position: relative;
}

.more-products-section .section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    margin: 0.5rem auto;
    border-radius: 2px;
}

/* Grid responsivo para produtos */
#product-list-container.row {
    margin: 0 -0.75rem; /* Compensa o padding das colunas Bootstrap */
}

#product-list-container .col {
    padding: 0.75rem; /* Espaçamento entre produtos */
}

/* Garantir altura uniforme dos cards na matriz */
#product-list-container .card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.125);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

#product-list-container .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

/* Imagens dos produtos na matriz */
#product-list-container .card-img-top {
    height: 200px;
    object-fit: contain;
    padding: 1rem;
    background: #f8f9fa;
    transition: transform 0.3s ease;
}

#product-list-container .card:hover .card-img-top {
    transform: scale(1.05);
}

/* Corpo do card */
#product-list-container .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

#product-list-container .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    flex-shrink: 0;
}

#product-list-container .card-text {
    flex: 1;
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

#product-list-container .text-primary {
    font-size: 1.1rem;
    font-weight: 700;
    color: #28a745 !important;
    margin-bottom: 0;
}

/* Footer do card */
#product-list-container .card-footer {
    padding: 0.75rem 1.25rem;
    background: transparent;
    border-top: none;
}

#product-list-container .btn {
    width: 100%;
    padding: 0.6rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

#product-list-container .btn-primary {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border: none;
    color: white;
}

#product-list-container .btn-primary:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-1px);
}

/* Responsividade específica para matriz */
@media (max-width: 575.98px) {
    /* xs: 1 coluna */
    #product-list-container .card-img-top {
        height: 180px;
    }
    
    #product-list-container .card-title {
        font-size: 0.95rem;
    }
    
    .more-products-section {
        padding: 1.5rem 0;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* sm: 2 colunas */
    #product-list-container .card-img-top {
        height: 190px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* md: 3 colunas */
    #product-list-container .card-img-top {
        height: 195px;
    }
}

@media (min-width: 992px) {
    /* lg e xl: 4 colunas */
    #product-list-container .card-img-top {
        height: 200px;
    }
    
    #product-list-container .card-title {
        font-size: 1rem;
    }
}

/* Ajustes específicos para telas muito grandes */
@media (min-width: 1400px) {
    #product-list-container {
        max-width: 1320px;
        margin: 0 auto;
    }
}

/* Responsividade do carrossel */
@media (max-width: 768px) {
    #productCarousel {
        width: 100%;
        max-width: 100%;
        margin: 0;
        min-height: 450px;
    }
    
    .carousel-product-card {
        margin: 0 0.125rem;
        width: calc(100% - 0.25rem);
        min-height: 380px;
        padding: 0.8rem;
    }
    
    .carousel-product-card .card-img-top {
        height: 160px;
    }
    
    .carousel-product-card .card-title {
        font-size: 0.9rem;
    }
    
    .carousel-product-card .product-price {
        font-size: 1.1rem;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
    }
    
    .carousel-control-prev {
        left: 10px;
    }
    
    .carousel-control-next {
        right: 10px;
    }
}

@media (max-width: 480px) {
    #productCarousel {
        min-height: 400px;
    }
    
    .carousel-product-card {
        margin: 0 0.1rem;
        width: calc(100% - 0.2rem);
        min-height: 350px;
        padding: 0.6rem;
    }
    
    .carousel-product-card .card-img-top {
        height: 140px;
    }
    
    .carousel-product-card .card-title {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    
    .carousel-product-card .product-price {
        font-size: 1rem;
    }
    
    .carousel-product-card .btn {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}

/* Mobile overflow prevention - additional fixes */
@media (max-width: 768px) {
    /* Banner mobile fixes */
    .hero-banner-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .hero-banner-placeholder {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Categories dropdown mobile fixes */
    .categories-dropdown-toggle-btn {
        max-width: 100% !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    .categories-dropdown-menu {
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        overflow-x: hidden !important;
    }
    
    /* Important notice mobile fix */
    .important-notice {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Navbar mobile fixes */
    .navbar {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .navbar-brand {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .navbar-collapse {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Search form mobile fixes */
    .site-header__search {
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .form-control {
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile fixes */
    .hero-banner-section {
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
    }
    
    .navbar {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    .container, .container-fluid {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}

/* ========================================
   ALINHAMENTO CONSISTENTE SEARCH-RESULTS
   ======================================== */

/* Forçar alinhamento da página search-results para centralização */
@media (max-width: 768px) {
    /* Garantir centralização em mobile */
    .search-results-page .row.justify-content-center {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Reset Bootstrap padding que pode causar desalinhamento */
    .search-results-page [class*="col-"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Ajustes adicionais para garantir alinhamento perfeito */
@media (max-width: 576px) {
    main.search-results-page.container {
        padding-left: clamp(15px, 4vw, 25px) !important;
        padding-right: clamp(15px, 4vw, 25px) !important;
    }
}

@media (max-width: 480px) {
    main.search-results-page.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ========================================
   /* ========================================
   SEARCH-RESULTS USA MESMO ALINHAMENTO DA HOMEPAGE
   ======================================== */

/* Aplicar py-4 e flex-grow-1 à main-content-container quando for search-results */
.main-content-container.search-results-page {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    flex-grow: 1;
}

/* Garantir que search-results use mesmo layout da homepage */
.search-results-page .homepage-main-layout {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(10px, 2vw, 40px);
    padding-right: clamp(10px, 2vw, 40px);
}

/* Garantir que o search-results-content se comporte como more-products-section */
.search-results-content {
    display: block;
    width: 100%;
}