/* Estilos Globais */
*, *::before, *::after {
    box-sizing: border-box;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap");

body, html {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    color: #333333; /* Preto Suave */
    background-color: #FAF0E6; /* Branco "Off-White" */
    overflow-x: hidden; /* Prevenir scroll horizontal indesejado */
    text-align: center; /* Centralizar todo o texto por defeito */
    min-height: 100vh; /* For sticky footer */
    display: flex; /* For sticky footer */
    flex-direction: column; /* For sticky footer */
}

main {
    flex-grow: 1; /* For sticky footer - ensures main content pushes footer down */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

section {
    text-align: center;
    padding: 20px 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Playfair Display", serif;
    color: #004D40; /* Verde Escuro */
    text-align: center;
}

header {
    background-color: #AEE1D0; /* Verde Claro */
    padding: 15px 0;
    border-bottom: 3px solid #50C878; /* Verde Água Principal */
    position: relative; 
    z-index: 100;
    text-align: left;
}

.header-container { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo a {
    font-family: "Playfair Display", serif;
    font-size: 2.2em;
    font-weight: bold;
    color: #004D40; 
    text-decoration: none;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.main-nav ul li {
    margin-left: 25px;
}

.main-nav ul li a {
    text-decoration: none;
    color: #004D40; 
    font-weight: bold;
    font-size: 1em;
}

.main-nav ul li a:hover {
    color: #50C878; 
}

.header-icons {
    display: flex;
    align-items: center;
}

.header-icons a {
    margin-left: 20px;
    text-decoration: none;
}

.header-icons img {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

.cart-count {
    background-color: #E2725B; 
    color: white;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 0.75em;
    vertical-align: top;
    margin-left: -8px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 0;
    z-index: 1002;
}

.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #004D40; 
    position: relative;
    transition: background-color 0.3s ease;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #004D40; 
    left: 0;
    transition: transform 0.3s ease;
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    bottom: -8px;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent; 
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

.hero-section {
    background-image: url("../images/hero_background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 77, 64, 0.5);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-section h1 {
    font-size: 3.8em;
    margin-bottom: 25px;
    color: #FFFFFF;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-section p {
    font-size: 1.4em;
    margin-bottom: 40px;
    color: #F0F0F0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.btn {
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary {
    background-color: #50C878;
    color: white;
    font-family: "Montserrat", sans-serif;
}

.btn-primary:hover {
    background-color: #004D40;
}

footer {
    background-color: #AEE1D0;
    color: #004D40;
    padding: 40px 0;
    text-align: center;
    border-top: 3px solid #50C878;
    flex-shrink: 0;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    justify-content: center;
}

.footer-links ul li {
    margin: 0 15px;
}

.footer-links ul li a {
    text-decoration: none;
    color: #004D40;
}

.footer-links ul li a:hover {
    color: #50C878;
}

.social-media a {
    margin: 0 12px;
}

.social-media img {
    width: 28px;
    height: 28px;
}

footer p {
    margin-top: 20px;
    font-size: 0.95em;
    color: #757575;
}

.page-title-section {
    background-color: #F5F5DC;
    padding: 40px 0;
    text-align: center;
    margin-bottom: 30px;
}

.page-title-section h1 {
    font-size: 2.8em;
    color: #004D40;
}

.page-title-section > .container > p,
.container.content-page > p,
.container.shop-page > p {
    text-align: center !important;
}

.faq-item {
    margin-bottom: 20px;
    text-align: left; 
}

.faq-item h3 {
    text-align: left; 
    font-size: 1.3em;
    color: #50C878;
    margin-bottom: 8px;
}

.faq-item p {
    text-align: left !important; 
    margin-left: 0; 
    padding-left: 0; 
}

.content-section p, .account-section p, .cart-section p, .search-results-section p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333333;
    text-align: center; 
}

main section .container > p:not(.faq-item p) {
    text-align: center;
}

.content-page h1 {
    margin-bottom: 30px;
}

.content-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
    text-align: center; 
}

.content-nav-card {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    box-shadow: 0px 20px 35px 0px rgba(210,180,140,0.7);
    transition: box-shadow 0.3s ease;
}

.content-nav-card h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
    color: #50C878;
}

.content-nav-card p {
    color: #757575;
    margin-bottom: 20px;
    text-align: center; 
}

.btn-secondary {
    background-color: #D2B48C;
    color: white;
    font-family: "Montserrat", sans-serif;
}

.btn-secondary:hover {
    background-color: #b89a73;
}

.product-filters {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #E0E0E0;
    text-align: center; 
}

.product-filters p {
    text-align: center !important;
}

.product-listing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}

/* Cards removidos - agora unificados na secção LOJA */

.content-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    margin-bottom: 20px;
    display: block; /* Para remover espaço extra e permitir sombra correta */
    box-shadow: 0px 20px 35px 0px rgba(210,180,140,0.7);
    transition: box-shadow 0.3s ease;
}

/* Estilos para Vídeos e Imagens em Páginas de Conteúdo (Exercícios, Receitas) */
.video-category, .recipe-item {
    margin-bottom: 40px;
    text-align: center;
}

.video-category h2, .recipe-item h2 {
    margin-bottom: 20px;
}

.media-item {
    max-width: 640px; 
    margin: 0 auto 10px auto;
    background-color: #000000;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    overflow: hidden;
    position: relative; /* Mantido para o wrapper interno */
    width: 100%;
    box-shadow: 0px 20px 35px 0px rgba(210,180,140,0.7);
    transition: box-shadow 0.3s ease;
}

.media-item-aspect-ratio-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Proporção 16:9 (9 / 16 * 100) */
    height: 0;
    background-color: #111; /* Fundo escuro para o wrapper, visível se o iframe não carregar */
}

.media-item iframe,
.media-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover; /* Para imagens, se usadas diretamente no wrapper */
}

.video-category > p, .recipe-item > p:not(.btn) {
    font-size: 0.95em;
    color: #555555;
    margin-top: 5px; /* Reduzido para aproximar da mídia */
    text-align: center;
}

/* Remover o script do player.js de ser exibido */
.media-item script {
    display: none !important;
}


/* Estilos Responsivos */
@media (max-width: 768px) {
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 15px;
        width: 100%;
        box-sizing: border-box;
        flex-wrap: nowrap !important;
        position: relative;
    }

    .menu-toggle {
        display: block;
        order: 1;
        margin-left: 0; 
        margin-right: 10px;
        padding: 10px 5px; 
        flex-shrink: 0; 
    }

    .logo {
        order: 2;
        margin: 0 auto;
        text-align: center; 
        flex-shrink: 0;
    }

    .logo a {
        font-family: "Playfair Display", serif; 
        font-size: 1.6em;
        font-weight: bold; 
        color: #004D40; 
        text-decoration: none; 
        white-space: nowrap; 
        display: inline-block; 
    }

    .header-icons {
        order: 3;
        margin-left: 10px;
        margin-right: 0; 
        flex-shrink: 0; 
        display: flex; 
        align-items: center; 
    }
    .header-icons a {
        margin-left: 8px;
        display: inline-block; 
        padding: 8px;
        position: relative;
    }
    .header-icons img {
        width: 24px;
        height: 24px;
        display: block; 
    }
    .cart-count {
        font-size: 0.7em;
        padding: 2px 5px;
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: #E2725B;
        color: white;
        border-radius: 50%;
        line-height: 1;
        min-width: 16px;
        text-align: center;
    }

    .main-nav {
        display: none !important; /* Escondido por padrão */
        position: absolute;
        top: 100%; /* Abaixo do cabeçalho */
        left: 0;
        width: 100%;
        background-color: #AEE1D0; /* Cor de fundo do menu mobile */
        z-index: 999;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out, max-height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
        padding-top: 0;
        padding-bottom: 0;
    }

    .main-nav.active {
        display: block !important; /* Mostra quando ativo */
        opacity: 1;
        visibility: visible;
        max-height: 500px; /* Altura suficiente para os itens */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
        padding: 0; 
        margin: 0;
    }
    .main-nav ul li {
        margin-left: 0;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(0, 77, 64, 0.2); 
    }
    .main-nav ul li:last-child {
        border-bottom: none;
    }

    .main-nav ul li a {
        display: block;
        padding: 15px 10px;
        color: #004D40; /* Cor do texto dos links no menu mobile */
        font-weight: bold;
    }
    .main-nav ul li a:hover {
        background-color: rgba(0, 77, 64, 0.1);
    }

    .hero-section h1 {
        font-size: 2.5em;
    }

    .hero-section p {
        font-size: 1.1em;
    }

    .footer-links ul {
        flex-direction: column;
    }

    .footer-links ul li {
        margin-bottom: 10px;
    }

    .content-navigation {
        grid-template-columns: 1fr;
    }

    .product-listing {
        grid-template-columns: 1fr;
    }
    
    .media-item {
        max-width: 100%; /* Em telas menores, permitir que o vídeo ocupe mais espaço */
    }
}

@media (max-width: 480px) {
    .logo a {
        font-size: 1.4em;
    }
    .header-icons {
        margin-left: auto; 
    }
    .header-icons a {
        margin-left: 4px;
    }
    .header-icons img {
        width: 16px;
        height: 16px;
    }
    .cart-count {
        font-size: 0.55em;
        padding: 1px 2px;
    }

    .hero-section h1 {
        font-size: 2em;
    }
    .hero-section p {
        font-size: 1em;
    }
    .btn {
        padding: 12px 24px;
        font-size: 0.9em;
    }
}

/* Estilos para Nova Galeria de Vídeos com Miniaturas */
.video-gallery-category {
    margin-bottom: 50px;
}

.video-gallery-category h2 {
    margin-bottom: 25px;
}

.video-gallery-new-layout {
    max-width: 960px; 
    margin: 0 auto; 
}

.video-gallery-top-row {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
    margin-bottom: 20px; 
}

.video-gallery-main-player-wrapper {
    flex: 2; 
    min-width: 300px; 
}

.video-gallery-main-player-wrapper .media-item {
    margin-bottom: 0; 
}

.video-placeholder-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px; 
    background-color: #e9e9e9;
    color: #555;
    text-align: center;
    border-radius: 8px;
    padding: 20px;
}

.video-description-container {
    flex: 1; 
    min-width: 250px; 
    font-family: "Montserrat", sans-serif; 
    font-weight: 700; 
    font-size: 0.95em;
    color: #004D40; 
    text-align: left;
    padding: 15px;
    background-color: transparent; 
    border-radius: 0; 
    border: none; 
    overflow-y: auto; 
    max-height: 360px; 
}

.video-gallery-thumbnail-carousel-container {
    width: 100%; 
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #eee; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
}

.carousel-nav-btn {
    width: 40px;
    height: 40px;
    background-color: #50C878; 
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    flex-shrink: 0; 
}

.carousel-nav-btn:hover {
    background-color: #004D40;
}

.video-gallery-thumbnail-list-wrapper {
    overflow: hidden; /* Esconde o scrollbar */
    flex-grow: 1; /* Permite que a lista ocupe o espaço restante */
    max-width: calc(100% - 100px); /* Subtrai a largura dos botões e gaps */
}

.video-gallery-thumbnail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Permite scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Scroll suave em iOS */
    scrollbar-width: none; /* Esconde scrollbar no Firefox */
}

.video-gallery-thumbnail-list::-webkit-scrollbar {
    display: none; /* Esconde scrollbar no Chrome, Safari, Edge */
}

.video-gallery-thumbnail-item {
    flex: 0 0 auto; /* Não cresce, não encolhe, baseia-se no width */
    width: 120px; /* Largura fixa para as miniaturas */
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 6px;
    /* transition: border-color 0.3s ease, box-shadow 0.3s ease; */ /* Transição da sombra removida para teste */
    text-align: center;
}

.video-gallery-thumbnail-item img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}

.video-gallery-thumbnail-item p {
    font-size: 0.8em;
    color: #333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-gallery-thumbnail-item.active {
    border-color: #50C878;
}

.video-gallery-thumbnail-item:hover {
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.1); */ /* Sombra removida para teste */
    border-color: #AEE1D0;
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212;
    color: #E0E0E0;
}

body.dark-mode header {
    background-color: #1E1E1E;
    border-bottom-color: #004D40;
}

body.dark-mode .logo a, 
body.dark-mode .main-nav ul li a,
body.dark-mode .hamburger-icon,
body.dark-mode .hamburger-icon::before,
body.dark-mode .hamburger-icon::after {
    color: #AEE1D0;
}

body.dark-mode .main-nav.active {
    background-color: #1E1E1E;
}

body.dark-mode .main-nav ul li {
    border-bottom-color: rgba(174, 225, 208, 0.2);
}

body.dark-mode .main-nav ul li a:hover {
    background-color: rgba(174, 225, 208, 0.1);
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #50C878;
}

body.dark-mode .content-section p, 
body.dark-mode .account-section p, 
body.dark-mode .cart-section p, 
body.dark-mode .search-results-section p,
body.dark-mode .faq-item p,
body.dark-mode .video-category > p,
body.dark-mode .recipe-item > p:not(.btn) {
    color: #BDBDBD;
}

body.dark-mode .content-nav-card, 
body.dark-mode .product-card, 
body.dark-mode .product-filters {
    background-color: #1E1E1E;
    border-color: #333333;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */ /* Sombra removida para teste (versão dark) */
}

body.dark-mode .content-nav-card h2, 
body.dark-mode .product-card h3 {
    color: #AEE1D0;
}

body.dark-mode .content-nav-card p, 
body.dark-mode .product-card .price {
    color: #BDBDBD;
}

body.dark-mode .btn-primary {
    background-color: #50C878;
    color: #121212;
}

body.dark-mode .btn-primary:hover {
    background-color: #AEE1D0;
}

body.dark-mode .btn-secondary {
    background-color: #8B4513; /* Marrom mais escuro para contraste */
    color: #E0E0E0;
}

body.dark-mode .btn-secondary:hover {
    background-color: #A0522D;
}

body.dark-mode footer {
    background-color: #1E1E1E;
    border-top-color: #004D40;
    color: #AEE1D0;
}

body.dark-mode .footer-links ul li a {
    color: #AEE1D0;
}

body.dark-mode .footer-links ul li a:hover {
    color: #50C878;
}

body.dark-mode footer p {
    color: #888888;
}

body.dark-mode .page-title-section {
    background-color: #2C2C2C;
}

body.dark-mode .page-title-section h1 {
    color: #AEE1D0;
}

body.dark-mode .faq-item h3 {
    color: #AEE1D0;
}

body.dark-mode .media-item {
    background-color: #000000;
    border-color: #333333;
    /* box-shadow: 0 6px 12px rgba(0,0,0,0.3); */ /* Sombra removida para teste (versão dark) */
}

body.dark-mode .video-placeholder-text {
    background-color: #2c2c2c;
    color: #bdbdbd;
}

body.dark-mode .video-description-container {
    color: #AEE1D0;
}

body.dark-mode .carousel-nav-btn {
    background-color: #004D40;
    color: #AEE1D0;
}

body.dark-mode .carousel-nav-btn:hover {
    background-color: #50C878;
}

body.dark-mode .video-gallery-thumbnail-item {
    /* box-shadow: none; */ /* Sombra removida para teste */
}

body.dark-mode .video-gallery-thumbnail-item.active {
    border-color: #AEE1D0;
}

body.dark-mode .video-gallery-thumbnail-item:hover {
    border-color: #50C878;
    /* box-shadow: 0 2px 6px rgba(255,255,255,0.1); */ /* Sombra removida para teste (versão dark) */
}

body.dark-mode .video-gallery-thumbnail-item p {
    color: #E0E0E0;
}


/* Regras de sombra removidas - agora unificadas na secção LOJA */

/* Ajustes para imagens de instrutores */
.instructor-profile-card .instructor-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px auto;
    display: block;
    border: 4px solid #AEE1D0;
    /* box-shadow: 0 4px 12px rgba(0, 77, 64, 0.2); */ /* Sombra removida para teste */
}

body.dark-mode .instructor-profile-card .instructor-photo {
    border-color: #004D40;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); */ /* Sombra removida para teste */
}

.instructor-callout-card .instructor-callout-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    border: 3px solid #AEE1D0;
    /* box-shadow: 0 2px 8px rgba(0, 77, 64, 0.15); */ /* Sombra removida para teste */
}

body.dark-mode .instructor-callout-card .instructor-callout-photo {
    border-color: #004D40;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); */ /* Sombra removida para teste */
}

.instructor-profile-card {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */ /* Sombra removida para teste */
}

.instructor-callout-card {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */ /* Sombra removida para teste */
    text-align: left;
}

body.dark-mode .instructor-profile-card {
    background-color: #1e1e1e;
    border-color: #333;
}

body.dark-mode .instructor-callout-card {
    background-color: #2c2c2c;
    border-color: #333;
}

.instructor-callout-content {
    flex-grow: 1;
}

.instructor-callout-content h3 {
    text-align: left;
    margin-top: 0;
}

.instructor-callout-content p {
    text-align: left;
}

.btn-tertiary {
    background-color: transparent;
    color: #50C878;
    border: 2px solid #50C878;
    padding: 8px 16px;
    font-size: 0.9em;
}

.btn-tertiary:hover {
    background-color: #50C878;
    color: white;
}

body.dark-mode .btn-tertiary {
    color: #AEE1D0;
    border-color: #AEE1D0;
}

body.dark-mode .btn-tertiary:hover {
    background-color: #AEE1D0;
    color: #1E1E1E;
}

/* Dark Mode Toggle Button */
#dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 15px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dark-mode-toggle img {
    width: 100%;
    height: 100%;
}

/* Live Page Specific Styles */
.live-stream-area {
    background-color: #000;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    /* box-shadow: 0 6px 12px rgba(0,0,0,0.15); */ /* Sombra removida para teste */
}

.live-stream-area h2 {
    color: #fff;
}

.live-stream-player {
    width: 100%;
    max-width: 800px;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background-color: #1c1c1c;
    border: 1px solid #333;
    border-radius: 8px;
    margin: 20px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.live-stream-player p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.live-chat-area {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */ /* Sombra removida para teste */
}

.live-chat-messages {
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 4px;
    text-align: left;
}

.chat-message {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #eee;
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message strong {
    color: #004D40;
}

.live-chat-input {
    display: flex;
    gap: 10px;
}

.live-chat-input textarea {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: none;
    font-family: "Montserrat", sans-serif;
}

.live-chat-input button {
    padding: 10px 20px;
}

body.dark-mode .live-stream-area {
    background-color: #1a1a1a;
    /* box-shadow: 0 6px 12px rgba(0,0,0,0.3); */ /* Sombra removida para teste */
}

body.dark-mode .live-stream-area h2 {
    color: #eee;
}

body.dark-mode .live-stream-player {
    background-color: #000;
    border-color: #444;
    color: #888;
}

body.dark-mode .live-chat-area {
    background-color: #2c2c2c;
    border-color: #444;
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.2); */ /* Sombra removida para teste */
}

body.dark-mode .live-chat-messages {
    background-color: #1e1e1e;
    border-color: #444;
}

body.dark-mode .chat-message {
    border-bottom-color: #333;
}

body.dark-mode .chat-message strong {
    color: #AEE1D0;
}

body.dark-mode .live-chat-input textarea {
    background-color: #333;
    border-color: #555;
    color: #eee;
}



/* Melhorar contraste dos ícones do cabeçalho no modo noturno */
body.dark-mode .header-icons a img,
body.dark-mode #dark-mode-toggle .sun-icon {
    filter: invert(96%) sepia(6%) saturate(432%) hue-rotate(344deg) brightness(100%) contrast(93%); /* Aproximação de FAF0E6 */
}

body:not(.dark-mode) #dark-mode-toggle .moon-icon {
    filter: none; /* Garante que não haja filtro no modo claro para o ícone da lua */
}



/* === Estilos Melhorados para o Chat da LIVE === */

.live-chat-section {
    background-color: #F8F9FA; /* Um fundo muito suave para a secção do chat */
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #DEE2E6;
    margin-top: 30px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); */ /* Sombra suave, reativar depois */
}

.live-chat-section h3 {
    color: #004D40; /* Verde Escuro, como outros títulos */
    margin-bottom: 20px;
    font-size: 1.6em;
}

.chat-container {
    display: flex;
    flex-direction: column;
}

.chat-messages {
    height: 350px; /* Aumentar um pouco a altura */
    overflow-y: auto;
    border: 1px solid #CED4DA;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #FFFFFF; /* Fundo branco para a área de mensagens */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espaço entre balões de mensagem */
}

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 18px; /* Cantos mais arredondados para balões */
    line-height: 1.5;
    word-wrap: break-word;
    border-bottom: none; /* Remover a linha tracejada anterior */
}

.chat-message .username {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 0.9em;
}

.chat-message .message-text {
    font-size: 1em;
}

.chat-message .timestamp {
    font-size: 0.75em;
    color: #6C757D; /* Cinza para o timestamp */
    margin-top: 5px;
    align-self: flex-end;
}

/* Mensagens do utilizador atual (alinhadas à direita) */
.chat-message.current-user {
    background-color: #AEE1D0; /* Verde claro da paleta */
    color: #004D40; /* Texto escuro para contraste */
    align-self: flex-end;
    border-bottom-right-radius: 6px; /* Para dar forma de balão */
}

.chat-message.current-user .username {
    color: #004D40; /* Verde escuro para o nome */
}

.chat-message.current-user .timestamp {
    color: #004D40; /* Timestamp mais escuro */
}

/* Mensagens de outros utilizadores (alinhadas à esquerda) */
.chat-message:not(.current-user) {
    background-color: #E9ECEF; /* Cinza claro para outros */
    color: #343A40;
    align-self: flex-start;
    border-bottom-left-radius: 6px; /* Para dar forma de balão */
}

.chat-message:not(.current-user) .username {
    color: #007BFF; /* Uma cor de destaque para outros utilizadores, pode ser ajustada */
}

/* Mensagens do sistema */
.chat-message.system-message {
    background-color: transparent;
    color: #495057;
    font-style: italic;
    font-size: 0.9em;
    text-align: center;
    align-self: center;
    max-width: 100%;
    padding: 8px 0;
}

.chat-message.system-message .username {
    display: none; /* Ocultar nome de utilizador para mensagens do sistema */
}

.chat-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-form textarea {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #CED4DA;
    border-radius: 8px;
    resize: none;
    font-family: "Montserrat", sans-serif;
    font-size: 1em;
    line-height: 1.5;
    min-height: 60px; /* Altura mínima para o campo de texto */
}

.chat-form textarea:focus {
    outline: none;
    border-color: #50C878; /* Verde Água Principal ao focar */
    box-shadow: 0 0 0 0.2rem rgba(80, 200, 120, 0.25);
}

.chat-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.chat-form-footer .btn-primary {
    padding: 10px 25px; /* Ajustar padding do botão */
    font-size: 1em;
    min-width: 120px; /* Largura mínima para o botão */
    position: relative; /* Para o preenchimento de progresso */
    overflow: hidden; /* Para o preenchimento de progresso */
}

.button-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* Começa em 0% */
    background-color: rgba(0, 77, 64, 0.3); /* Verde escuro com opacidade */
    transition: width 0s linear; /* Transição será definida pelo JS */
    z-index: 1;
}

.button-text-content {
    position: relative;
    z-index: 2;
}

.char-counter-container {
    font-size: 0.85em;
    color: #6C757D;
}

.char-counter-container .warning {
    color: #E2725B; /* Cor de aviso */
    font-weight: bold;
}

.chat-restriction-text {
    text-align: center;
    color: #6C757D;
    padding: 30px 15px;
    background-color: #F8F9FA;
    border: 1px dashed #CED4DA;
    border-radius: 8px;
    margin-top: 15px;
}

/* Modo Escuro para o Chat Melhorado */
body.dark-mode .live-chat-section {
    background-color: #212529; /* Fundo escuro para a secção */
    border-color: #495057;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); */
}

body.dark-mode .live-chat-section h3 {
    color: #AEE1D0; /* Verde claro para títulos */
}

body.dark-mode .chat-messages {
    background-color: #343A40; /* Fundo mais escuro para mensagens */
    border-color: #495057;
}

body.dark-mode .chat-message.current-user {
    background-color: #004D40; /* Verde escuro da paleta */
    color: #E9ECEF; /* Texto claro */
}

body.dark-mode .chat-message.current-user .username {
    color: #AEE1D0;
}

body.dark-mode .chat-message.current-user .timestamp {
    color: #AEE1D0;
}

body.dark-mode .chat-message:not(.current-user) {
    background-color: #495057; /* Cinza escuro para outros */
    color: #F8F9FA;
}

body.dark-mode .chat-message:not(.current-user) .username {
    color: #80bdff; /* Azul claro para destaque */
}

body.dark-mode .chat-message.system-message {
    color: #ADB5BD;
}

body.dark-mode .chat-form textarea {
    background-color: #495057;
    border-color: #6C757D;
    color: #F8F9FA;
}

body.dark-mode .chat-form textarea::placeholder {
    color: #ADB5BD;
}

body.dark-mode .chat-form textarea:focus {
    border-color: #AEE1D0;
    box-shadow: 0 0 0 0.2rem rgba(174, 225, 208, 0.25);
}

body.dark-mode .char-counter-container {
    color: #ADB5BD;
}

body.dark-mode .char-counter-container .warning {
    color: #F5A69A; /* Tom de aviso mais claro */
}

body.dark-mode .chat-restriction-text {
    background-color: #343A40;
    color: #ADB5BD;
    border-color: #495057;
}

/* Ajuste para o botão de enviar no modo escuro, se necessário */
body.dark-mode .chat-form-footer .btn-primary {
    background-color: #AEE1D0; /* Botão verde claro */
    color: #004D40; /* Texto escuro */
}

body.dark-mode .chat-form-footer .btn-primary:hover {
    background-color: #80C7B1; /* Um pouco mais escuro no hover */
}

body.dark-mode .button-progress-fill {
    background-color: rgba(0, 77, 64, 0.5); /* Manter um tom escuro para o progresso */
}




/* === Estilos para a Página de Instrutores === */

.instructors-page .instructor-profile {
    margin-bottom: 40px;
}

.instructors-page .instructor-header {
    display: flex;
    align-items: center; /* Alinhar verticalmente a imagem e o texto */
    gap: 30px; /* Espaço entre a imagem e o texto */
    margin-bottom: 20px;
    text-align: left; /* Alinhar texto à esquerda */
}

.instructors-page .instructor-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Imagem circular */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    object-position: center; /* Centraliza a imagem dentro do círculo */
    border: 3px solid #AEE1D0; /* Borda verde claro, como no header */
    flex-shrink: 0; /* Evitar que a imagem encolha */
}

.instructors-page .instructor-intro {
    flex-grow: 1;
}

.instructors-page .instructor-intro h2 {
    text-align: left;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 2em;
}

.instructors-page .instructor-title {
    text-align: left;
    font-size: 1.1em;
    color: #50C878; /* Verde Água Principal */
    font-weight: bold;
    margin-bottom: 15px;
}

.instructors-page .instructor-intro .btn-secondary {
    margin-right: 10px;
    margin-bottom: 10px; /* Espaço se os botões quebrarem linha */
}

.instructors-page .instructor-bio p {
    text-align: left;
    line-height: 1.7;
    color: #333333;
}

.instructors-page .instructor-divider {
    border: 0;
    height: 1px;
    background-color: #DEE2E6;
    margin: 40px auto;
}

/* Modo Escuro para Instrutores */
body.dark-mode .instructors-page .instructor-photo {
    border-color: #50C878; /* Borda verde água mais forte no modo escuro */
}

body.dark-mode .instructors-page .instructor-title {
    color: #AEE1D0; /* Verde claro para o título no modo escuro */
}

body.dark-mode .instructors-page .instructor-bio p {
    color: #E0E0E0;
}

body.dark-mode .instructors-page .instructor-divider {
    background-color: #495057;
}

/* Responsividade para a página de instrutores */
@media (max-width: 768px) {
    .instructors-page .instructor-header {
        flex-direction: column; /* Empilhar imagem e texto */
        align-items: center; /* Centralizar itens empilhados */
        text-align: center; /* Centralizar texto quando empilhado */
    }

    .instructors-page .instructor-photo {
        width: 150px; /* Reduzir um pouco a imagem em telas menores */
        height: 150px;
        margin-bottom: 15px;
    }

    .instructors-page .instructor-intro h2,
    .instructors-page .instructor-title,
    .instructors-page .instructor-bio p {
        text-align: center; /* Centralizar todo o texto em mobile */
    }

    .instructors-page .instructor-intro .btn-secondary {
        display: block; /* Botões ocupam largura total e empilham */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        max-width: 250px; /* Limitar largura dos botões */
    }
    .instructors-page .instructor-intro .btn-secondary:last-child {
        margin-bottom: 0;
    }
}



/* === Refinamentos Estéticos para o Chat da LIVE (Harmonização com Cartões) === */

/* Sombra para o container principal do chat */
.live-chat-section {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.dark-mode .live-chat-section {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Estilo do botão Enviar para assemelhar-se ao btn-tertiary dos cartões */
.chat-form-footer .btn-primary {
    background-color: transparent;
    color: #50C878; /* Verde Água Principal */
    border: 2px solid #50C878;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.chat-form-footer .btn-primary:hover {
    background-color: #50C878;
    color: white;
    border-color: #50C878; /* Mantém a cor da borda no hover */
}

/* Modo Escuro para o botão Enviar do chat */
body.dark-mode .chat-form-footer .btn-primary {
    background-color: transparent;
    color: #AEE1D0; /* Verde Claro (estilo instrutores) */
    border-color: #AEE1D0;
}

body.dark-mode .chat-form-footer .btn-primary:hover {
    background-color: #AEE1D0;
    color: #004D40; /* Verde Escuro (para contraste) */
    border-color: #AEE1D0;
}

/* Garantir que o texto dentro do botão (com progress fill) seja visível */
.chat-form-footer .btn-primary .button-text-content {
    position: relative;
    z-index: 2;
}

/* Ajustar o preenchimento de progresso para o novo estilo de botão */
.chat-form-footer .btn-primary .button-progress-fill {
    background-color: rgba(80, 200, 120, 0.2); /* Verde Água com opacidade para fundo transparente */
}

body.dark-mode .chat-form-footer .btn-primary .button-progress-fill {
    background-color: rgba(174, 225, 208, 0.2); /* Verde Claro com opacidade para fundo transparente no modo escuro */
}

/* === Fim dos Refinamentos Estéticos para o Chat da LIVE === */



/* Styles for Text-Heavy Content Pages */
.text-content-container {
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #E0E0E0;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.07);
    margin-top: 20px; 
    margin-bottom: 30px;
    text-align: left;
}

.text-content-container p,
.text-content-container ul,
.text-content-container ol {
    text-align: left;
    color: #333333;
    line-height: 1.7;
    font-size: 1em; /* Adjust as needed */
}

.text-content-container h1,
.text-content-container h2,
.text-content-container h3,
.text-content-container h4,
.text-content-container h5,
.text-content-container h6 {
    text-align: left;
    color: #004D40; /* Heading color */
}

.text-content-container ul,
.text-content-container ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* General List Styling Improvements */
.content-page ul, .content-page ol,
.product-full-description-section ul, .product-full-description-section ol,
.text-content-container ul, .text-content-container ol {
    list-style-type: none; /* Remove default browser list styles */
    padding-left: 0; 
}

.content-page ul li, 
.product-full-description-section ul li,
.text-content-container ul li {
    padding-left: 1.8em; 
    position: relative;
    margin-bottom: 0.6em;
    line-height: 1.7;
    color: #333333;
    text-align: left;
}

.content-page ul li::before,
.product-full-description-section ul li::before,
.text-content-container ul li::before {
    content: "\2022"; /* Bullet character • */
    color: #50C878; /* Main accent color */
    font-weight: bold;
    display: inline-block;
    position: absolute;
    left: 0.5em; /* Adjusted for better alignment */
    top: 0; 
}

.content-page ol li, 
.product-full-description-section ol li,
.text-content-container ol li {
    margin-bottom: 0.6em;
    line-height: 1.7;
    color: #333333;
    text-align: left;
    list-style-position: outside;
    margin-left: 1.8em; /* Indent for ordered list numbers */
}

.content-page ol, 
.product-full-description-section ol,
.text-content-container ol {
    list-style-type: decimal; /* Use decimal for ordered lists */
    padding-left: 0; /* Reset padding, margin-left on li will handle indent */
}

/* Ensure paragraphs within these sections also align left if not globally centered */
.product-full-description-section p {
    text-align: left;
}



/* Styling for Recipe Page (receitas.html) Category Titles and Cards */
.content-page > h2 { /* Targets category titles like "Cozinha (Elaine)" */
    margin-top: 40px;
    margin-bottom: 25px;
    font-size: 2em; /* Slightly larger for category emphasis */
}

.recipe-item h3 { /* Recipe title within a card */
    margin-top: 15px; /* Space above recipe title, below video */
    margin-bottom: 10px;
    font-size: 1.6em;
    color: #004D40; /* Ensure it uses the standard heading color */
}

.recipe-item > p:not(.btn) { /* Recipe description */
    margin-top: 0; /* Reset if needed, or adjust from 5px */
    margin-bottom: 15px; /* Space below description, above button */
    font-size: 1em;
    line-height: 1.6;
}

.recipe-item .btn-primary { /* "Ver Receita Completa" button */
    margin-top: 10px; /* Ensure some space if description is short or absent */
}

/* Adjustments for product-template.html related products section if needed */
.related-products-section .product-card {
    margin-bottom: 20px; /* Ensure cards have some bottom margin if they wrap */
}

.related-products-section .product-card h3 {
    font-size: 1.3em; /* Consistent with other product card titles */
}

.related-products-section .product-card .product-price {
    font-size: 1.1em;
    margin-bottom: 12px;
}



/* General List Styling for Content Areas */
.content-page ul,
.content-section ul,
.text-content-container ul {
    list-style-type: none; /* Remove default bullets */
    padding-left: 0; /* Remove default padding */
}

.content-page ul li,
.content-section ul li,
.text-content-container ul li {
    padding-left: 1.5em; /* Add padding for custom bullet or spacing */
    text-indent: -1.5em; /* Indent for custom bullet alignment */
    margin-bottom: 0.5em; /* Space between list items */
}

.content-page ul li::before,
.content-section ul li::before,
.text-content-container ul li::before {
    content: "\2022"; /* Unicode for bullet character • */
    color: #2E8B57; /* SeaGreen - or another theme color */
    font-weight: bold;
    display: inline-block;
    width: 1.5em; /* Width of the custom bullet area */
    margin-left: -1.5em; /* Negative margin to pull it back */
}

.content-page ol,
.content-section ol,
.text-content-container ol {
    list-style-type: none; /* Remove default numbers */
    padding-left: 0;
    counter-reset: ordered-list-counter;
}

.content-page ol li,
.content-section ol li,
.text-content-container ol li {
    padding-left: 1.5em;
    text-indent: -1.5em;
    margin-bottom: 0.5em;
    counter-increment: ordered-list-counter;
}

.content-page ol li::before,
.content-section ol li::before,
.text-content-container ol li::before {
    content: counter(ordered-list-counter) ". ";
    color: #2E8B57; /* SeaGreen - or another theme color */
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

/* Ensure specificity for product description lists if needed */
.product-full-description-section ul li::before {
    content: "\2713"; /* Checkmark for benefits, for example */
    color: #2E8B57;
}


/* Background color consistency adjustments */
.page-title-section {
    background-color: #F5F5DC; /* Original color */
    padding: 2rem 0;
    margin-bottom: 2rem;
}

.page-title-section .container {
    background-color: #FFFFFF; /* White container for better contrast */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.text-content-container {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

/* Improved spacing for product details */
.product-main-info {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 3rem;
}

.product-gallery {
    flex: 1 1 400px;
}

.product-details {
    flex: 1 1 400px;
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Recipe page styling improvements */
.recipe-video-section {
    margin-bottom: 3rem;
}

.recipe-details-section {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.recipe-item {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

/* Search results styling */
.search-results-section {
    margin-bottom: 3rem;
}

/* Terms and Privacy pages styling */
.content-section .container {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


    width: 100%;
    padding-top: 20px;
    padding-bottom: 50px; /* Space for pagination and navigation */
}

    width: auto; /* Swiper will calculate based on slidesPerView */
    height: auto; /* Adjust height automatically based on content */
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make cards in a row same height if desired */
}

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 280px; /* Adjust card width as needed */
    margin: 0 10px; /* Spacing between cards */
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

    width: 100%;
    height: 160px; /* Defined image height */
    object-fit: contain; /* Or 'cover', depending on desired image display */
    padding: 10px;
    background-color: #f8f8f8; /* Light background for image area */
}

    padding: 15px;
    text-align: center;
    flex-grow: 1; /* Allows this part to grow and push button to bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 8px;
    color: #333;
}

    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}

    font-size: 1.2rem;
    font-weight: bold;
    color: #2E8B57; /* SeaGreen */
    margin-bottom: 15px;
}

    display: block;
    width: calc(100% - 30px); /* Full width minus padding */
    margin: 0 auto 15px auto;
    text-decoration: none;
}

    position: static; /* Change from absolute to static or relative */
    margin-top: 25px; /* Add space above pagination */
    bottom: auto; /* Reset bottom positioning if it was absolute */
}

/* Swiper navigation buttons */
.swiper-button-next, .swiper-button-prev {
    color: #2E8B57 !important; /* Theme color for arrows */
}

/* Swiper pagination bullets */
.swiper-pagination-bullet-active {
    background: #2E8B57 !important; /* Theme color for active bullet */
}



/* Styling for product actions in carousel */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute space between label/input and button */
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 5px; /* Add some horizontal padding */
}

    font-size: 0.9em;
    margin-right: 5px;
    color: #555;
}

    width: 50px; /* Adjust width as needed */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
    margin-right: 10px; /* Space between input and add button */
}

    background-color: #28a745; /* Green for add to cart */
    color: white;
    padding: 8px 12px;
    font-size: 0.85em;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-grow: 1; /* Allow button to take available space if needed, or set specific width */
    max-width: 100px; /* Max width for the add button */
}

    background-color: #218838;
}

    background-color: #6c757d; /* Grey for details */
    color: white;
    padding: 8px 12px;
    font-size: 0.85em;
    border-radius: 4px;
    text-decoration: none;
    display: block; /* Make it block to take full width if not in flex */
    margin-top: 5px; /* Space above details button if actions are stacked */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    background-color: #5a6268;
}

/* Adjustments if product-info is flex column to ensure actions are at bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes actions/details to bottom if info grows */
    flex-grow: 1;
}



    position: relative; /* Necessário para o posicionamento absoluto da paginação e botões */
    padding-bottom: 40px; /* Espaço para a paginação abaixo dos slides */
}

    position: absolute;
    bottom: 10px; /* Posiciona na parte inferior do container */
    left: 0;
    width: 100%;
    text-align: center;
}

    background-color: #004D40; /* Cor dos bullets - Verde Escuro */
    opacity: 0.7;
}

    background-color: #50C878; /* Cor do bullet ativo - Verde Água Principal */
    opacity: 1;
}

/* Ajustes para os cartões de produto dentro do carrossel */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para alinhar o botão "Ver Detalhes" em baixo */
    height: 100%; /* Para garantir que todos os cartões tenham a mesma altura no slide */
    box-shadow: 0px 10px 20px rgba(210, 180, 140, 0.5); /* Sombra mais suave */
    padding: 15px; /* Padding interno do cartão */
}

    width: 100%;
    height: 160px; /* Altura definida anteriormente */
    object-fit: contain; /* Para garantir que a imagem caiba sem cortar, mantendo proporção */
    margin-bottom: 10px;
    border-radius: 4px;
}

    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Para que o product-info ocupe o espaço restante */
    text-align: center;
}

    font-size: 1.1em; /* Ajuste de tamanho para caber melhor */
    margin-bottom: 5px;
    color: #004D40;
}

    font-size: 0.85em;
    color: #757575;
    margin-bottom: 5px;
}

    font-size: 1em;
    font-weight: bold;
    color: #E2725B;
    margin-bottom: 10px;
}

    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espaço entre label, input e botão */
}

    width: 50px; /* Largura para o campo de quantidade */
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}

    padding: 8px 12px; /* Padding menor para botões no carrossel */
    font-size: 0.85em;
    width: auto; /* Largura automática baseada no conteúdo */
    flex-grow: 1; /* Para que os botões possam ocupar espaço disponível */
    max-width: 120px; /* Limitar a largura máxima dos botões */
    border-radius: 4px;
    text-decoration: none; /* Garantir que não haja sublinhado */
    display: inline-block; /* Para que o padding funcione corretamente */
    line-height: 1.4; /* Melhorar alinhamento vertical do texto */
}
    background-color: #50C878; /* Verde Água Principal */
    color: white;
    border: none;
}
    background-color: #004D40; /* Verde Escuro */
}

    background-color: #D2B48C; /* Castanho Claro */
    color: white;
    margin-top: auto; /* Empurra o botão para o final do product-info */
}
    background-color: #b89a73;
}

/* Setas de Navegação do Swiper (se necessário ajustar, mas o Willy disse que estavam ok) */
    color: #004D40; /* Cor das setas - Verde Escuro */
    --swiper-navigation-size: 30px; /* Tamanho das setas */
}
    font-size: var(--swiper-navigation-size) !important;
}



/* Estilos para a Página do Carrinho */
.cart-section .container {
    max-width: 800px; /* Limitar a largura do conteúdo do carrinho */
}

.cart-item {
    display: flex;
    align-items: flex-start; /* Alinhar itens ao topo */
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    margin-bottom: 20px;
}

.cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.cart-item-image {
    width: 100px; /* Largura da imagem */
    height: 100px; /* Altura da imagem */
    object-fit: contain; /* Para garantir que a imagem caiba sem cortar, mantendo proporção */
    margin-right: 20px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
}

.cart-item-details {
    flex-grow: 1;
    text-align: left;
}

.cart-item-details h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.2em;
    color: #004D40;
}

.cart-item-details p {
    margin-bottom: 5px;
    font-size: 0.95em;
    color: #333;
}

.cart-item-actions {
    text-align: right;
    min-width: 150px; /* Espaço para subtotal e botão */
}

.cart-item-actions p {
    font-weight: bold;
    margin-bottom: 10px;
}

.btn-remove-from-cart {
    background-color: #E2725B; /* Vermelho Salmão */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.btn-remove-from-cart:hover {
    background-color: #c76450;
}

#cart-summary {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 2px solid #004D40;
    text-align: right;
}

#cart-summary h3 {
    text-align: right;
    margin-bottom: 15px;
}

#cart-summary p {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}

.btn-checkout {
    padding: 12px 25px;
    font-size: 1.1em;
}

.empty-cart-message {
    text-align: center;
    font-size: 1.2em;
    color: #757575;
    padding: 40px 0;
}

/* ========== ESTILOS PARA ARTIGOS - INÍCIO ========== */

/* Container principal */
.artigos-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Grid de artigos */
.artigos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* Card de artigo */
.artigo-card {
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.artigo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* Imagem do artigo */
.artigo-imagem {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.artigo-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.artigo-card:hover .artigo-imagem img {
    transform: scale(1.05);
}

/* Badge de destaque */
.destaque-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFD700;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Conteúdo do artigo */
.artigo-conteudo {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Meta informações */
.artigo-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.artigo-data {
    display: flex;
    align-items: center;
    gap: 5px;
}

.artigo-categoria {
    background: #f1f8fe;
    color: #4285f4;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Título e descrição */
.artigo-titulo {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    margin: 0 0 12px 0;
    color: #004D40;
    line-height: 1.4;
}

.artigo-descricao {
    color: #555;
    margin-bottom: 15px;
    line-height: 1.5;
    flex: 1;
}

/* Rodapé do artigo */
.artigo-rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.artigo-autor {
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-lermais {
    color: #50C878;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s;
}

.btn-lermais:hover {
    color: #004D40;
}

/* Estados de carregamento/erro */
.artigos-loading {
    text-align: center;
    padding: 40px;
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: #50C878;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

.no-articles {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.error-message {
    text-align: center;
    padding: 40px 20px;
    background: #fff9f9;
    border-radius: 8px;
    color: #d32f2f;
}

/* Animações */
@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.artigo-card {
    animation: fadeIn 0.5s ease forwards;
}

/* ========== MODOS RESPONSIVOS ========== */

@media (max-width: 768px) {
    .artigos-grid {
        grid-template-columns: 1fr;
    }
    
    .artigo-imagem {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .artigo-rodape {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
    
    .btn-lermais {
        align-self: flex-end;
    }
}

/* ========== MODO ESCURO ========== */

body.dark-mode .artigo-card {
    background-color: #1e1e1e;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode .artigo-titulo {
    color: #AEE1D0;
}

body.dark-mode .artigo-descricao {
    color: #BDBDBD;
}

body.dark-mode .artigo-meta,
body.dark-mode .artigo-data {
    color: #9E9E9E;
}

body.dark-mode .artigo-categoria {
    background: #2c3e50;
    color: #AEE1D0;
}

body.dark-mode .artigo-rodape {
    border-top-color: #333;
}

body.dark-mode .artigo-autor {
    color: #9E9E9E;
}

body.dark-mode .btn-lermais {
    color: #AEE1D0;
}

body.dark-mode .btn-lermais:hover {
    color: #50C878;
}

body.dark-mode .destaque-badge {
    background: rgba(30, 30, 30, 0.8);
}

body.dark-mode .error-message {
    background: #2c2c2c;
    color: #ff6659;
}
/* Loading states */
.artigo-loading {
    text-align: center;
    padding: 2rem;
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #50C878;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.artigo-error {
    background: #ffebee;
    padding: 1rem;
    text-align: center;
    border-radius: 4px;
}

.artigo-error button {
    background: #50C878;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    margin-top: 10px;
    cursor: pointer;
}

/* ========== ESTILOS PARA ARTIGOS - FIM ========== */

/home/ubuntu/upload/pasted_content.txt



/* === ADDED CORRECTIONS V3 (Recipe Details Columns) === */
/* Styles for Recipe Detail Page Columns */
@media (min-width: 768px) {
  .recipe-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: 30px; /* Space between columns */
    align-items: start; /* Align items to the start of the grid area */
    margin-top: 30px; /* Add some space above */
  }
  .ingredients-column,
  .instructions-column {
    text-align: left; /* Ensure text inside columns is left-aligned */
  }
  .ingredients-column h3,
  .instructions-column h3 {
      text-align: left; /* Ensure headings are left-aligned */
      margin-bottom: 15px;
  }
  .ingredients-column ul,
  .instructions-column ol {
      padding-left: 20px; /* Indent lists */
      margin-top: 0;
  }
}

/* Ensure columns stack on smaller screens (default behavior for block elements) */
/* Apply base styles for mobile if not already present */
.recipe-columns {
  margin-top: 20px;
}
.ingredients-column,
.instructions-column {
  margin-bottom: 20px; /* Space between stacked columns on mobile */
  text-align: left;
}
.ingredients-column h3,
.instructions-column h3 {
    text-align: left;
    margin-bottom: 10px;
}
.ingredients-column ul,
.instructions-column ol {
    padding-left: 20px;
    margin-top: 0;
}
/* === END ADDED CORRECTIONS V3 (Recipe Details Columns) === */



/* === ADDED CORRECTIONS V3 (Recipe Cards Style) === */
.recipe-listing { /* Assuming a container div exists, similar to product-listing */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive grid */
    gap: 30px;
    margin-top: 30px;
}

.recipe-item {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 0; /* Remove default padding if any, apply padding to content */
    text-align: left; /* Align text left within the card */
    box-shadow: 0px 4px 15px rgba(0, 77, 64, 0.1); /* Softer shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensure content respects border-radius */
}

.recipe-item:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 25px rgba(0, 77, 64, 0.15);
}

.recipe-item .recipe-image-container { /* Container for the image */
    width: 100%;
    height: 200px; /* Fixed height for consistency */
    overflow: hidden; /* Crop image if needed */
}

.recipe-item .recipe-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container */
    display: block;
    transition: transform 0.3s ease;
}

.recipe-item:hover .recipe-image-container img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.recipe-item .recipe-content { /* Container for text content */
    padding: 20px;
    flex-grow: 1; /* Allow content to fill space */
    display: flex;
    flex-direction: column;
}

.recipe-item h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: #004D40;
    text-align: left; /* Ensure title is left-aligned */
    margin-top: 0; /* Remove default top margin */
}

.recipe-item .recipe-meta { /* Container for meta info like time/servings */
    font-size: 0.9em;
    color: #757575;
    margin-bottom: 15px;
    display: flex;
    gap: 15px; /* Space between meta items */
}

.recipe-item .recipe-meta span {
    display: inline-flex; /* Use flex for icon alignment if needed */
    align-items: center;
}
/* Add icons later if needed */

.recipe-item .recipe-description {
    font-size: 1em;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 20px;
    flex-grow: 1; /* Push button to bottom */
    text-align: left; /* Ensure description is left-aligned */
}

.recipe-item .btn-tertiary { /* Assuming a button class */
    background-color: #D2B48C; /* Example color, adjust as needed */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin-top: auto; /* Push to bottom */
    align-self: flex-start; /* Align button left */
    transition: background-color 0.3s ease;
}

.recipe-item .btn-tertiary:hover {
    background-color: #b89a73; /* Darker shade on hover */
}
/* === END ADDED CORRECTIONS V3 (Recipe Cards Style) === */



/* === ADDED CORRECTIONS V3 (Dark Mode) === */
body.dark-mode {
    background-color: #1a2e29; /* Dark Green Background */
    color: #e0e0e0; /* Light Gray Text */
}

body.dark-mode header {
    background-color: #00382d; /* Darker Header Background */
    border-bottom-color: #3a8f6b; /* Adjusted Border */
}

body.dark-mode .logo a,
body.dark-mode .main-nav ul li a {
    color: #aee1d0; /* Lighter text for header links */
}
body.dark-mode .main-nav ul li a:hover {
    color: #ffffff; /* White on hover */
}

body.dark-mode .hamburger-icon,
body.dark-mode .hamburger-icon::before,
body.dark-mode .hamburger-icon::after {
    background-color: #aee1d0; /* Lighter hamburger icon */
}
body.dark-mode .menu-toggle[aria-expanded="true"] .hamburger-icon {
    background-color: transparent;
}

body.dark-mode .header-icons img {
    filter: invert(96%) sepia(6%) saturate(432%) hue-rotate(344deg) brightness(100%) contrast(93%); /* Invert icons to white-ish */
}
/* Keep sun/moon icons as they are */
body.dark-mode .header-icons .sun-icon { display: block !important; }
body.dark-mode .header-icons .moon-icon { display: none !important; }
body:not(.dark-mode) .header-icons .sun-icon { display: none !important; }
body:not(.dark-mode) .header-icons .moon-icon { display: block !important; }


body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #aee1d0; /* Lighter Headings */
}

body.dark-mode .hero-section::before {
    background-color: rgba(0, 0, 0, 0.6); /* Darker Overlay */
}
body.dark-mode .hero-section h1 {
    color: #FFFFFF;
}
body.dark-mode .hero-section p {
    color: #e0e0e0;
}

body.dark-mode .btn-primary {
    background-color: #50C878;
    color: #1a2e29; /* Dark text on light green button */
}
body.dark-mode .btn-primary:hover {
    background-color: #aee1d0;
}

body.dark-mode .btn-secondary {
    background-color: #b89a73; /* Slightly darker secondary button */
    color: #ffffff;
}
body.dark-mode .btn-secondary:hover {
    background-color: #D2B48C;
}

body.dark-mode .btn-tertiary { /* Assuming this class exists for recipe buttons */
    background-color: #a38b6a;
    color: #ffffff;
}
body.dark-mode .btn-tertiary:hover {
    background-color: #D2B48C;
}


body.dark-mode footer {
    background-color: #00382d; /* Darker Footer */
    color: #aee1d0; /* Lighter Footer Text */
    border-top-color: #3a8f6b;
}
body.dark-mode .footer-links ul li a {
    color: #aee1d0;
}
body.dark-mode .footer-links ul li a:hover {
    color: #ffffff;
}
body.dark-mode .social-media img {
    filter: invert(96%) sepia(6%) saturate(432%) hue-rotate(344deg) brightness(100%) contrast(93%);
}
body.dark-mode footer p {
    color: #bdbdbd; /* Lighter copyright text */
}

body.dark-mode .page-title-section {
    background-color: #2a4a41; /* Darker background for title sections */
}
body.dark-mode .page-title-section h1 {
    color: #aee1d0;
}

body.dark-mode .content-section p,
body.dark-mode .account-section p,
body.dark-mode .cart-section p,
body.dark-mode .search-results-section p,
body.dark-mode .faq-item p,
body.dark-mode .recipe-item .recipe-description,
body.dark-mode .recipe-item .recipe-meta,
body.dark-mode .ingredients-column,
body.dark-mode .instructions-column {
    color: #e0e0e0; /* Ensure paragraph text is light */
}

body.dark-mode .faq-item h3 {
    color: #50C878; /* Keep FAQ question color */
}

/* Regras de modo escuro removidas - agora unificadas na secção LOJA */


body.dark-mode .content-nav-card h2 {
    color: #50C878; /* Keep highlight color */
}
body.dark-mode .content-nav-card p {
    color: #bdbdbd; /* Lighter card text */
}

/* Regras específicas de product-card removidas - agora unificadas */

body.dark-mode .recipe-item h3 {
    color: #aee1d0; /* Lighter recipe title */
}
body.dark-mode .recipe-item .recipe-meta {
    color: #bdbdbd; /* Lighter meta text */
}

body.dark-mode .product-filters {
    background-color: #2a4a41;
    border-color: #3a8f6b;
}
body.dark-mode .product-filters p {
    color: #e0e0e0;
}

body.dark-mode .media-item {
    border-color: #3a8f6b;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .video-description-container {
    color: #aee1d0;
}
body.dark-mode .video-placeholder-text {
    background-color: #2a4a41;
    color: #bdbdbd;
}
body.dark-mode .carousel-nav-btn {
    background-color: #3a8f6b;
    color: #1a2e29;
}
body.dark-mode .carousel-nav-btn:hover {
    background-color: #50C878;
}
body.dark-mode .video-gallery-thumbnail-item {
    border-color: transparent;
}
body.dark-mode .video-gallery-thumbnail-item.active {
    border-color: #50C878;
}

/* Ensure main nav background in mobile dark mode */
body.dark-mode .main-nav {
    background-color: #00382d;
}
body.dark-mode .main-nav ul li {
    border-bottom-color: rgba(174, 225, 208, 0.2); /* Lighter border */
}
body.dark-mode .main-nav ul li a {
    color: #aee1d0;
}
body.dark-mode .main-nav ul li a:hover {
    background-color: rgba(174, 225, 208, 0.1);
}

/* === END ADDED CORRECTIONS V3 (Dark Mode) === */

/* MODO ESCURO PARA CARDS - CORREÇÃO (SEM AZUL) */
body.dark-mode .content-nav-card {
    background: #1a2e29; /* Verde escuro - tom harmonizado com sua paleta */
    border-color: #3a8f6b; /* Borda verde mais clara */
}

body.dark-mode .content-nav-card h2 {
    color: #AEE1D0; /* Verde claro do seu header */
}

body.dark-mode .content-nav-card p {
    color: #e0f2f1; /* Cinza esverdeado claro */
}

/* Aplicando a mesma correção para cards de artigos */
body.dark-mode .content-card {
    background: #1a2e29;
    border-color: #3a8f6b;
}

body.dark-mode .content-card-body h3 {
    color: #AEE1D0;
}

body.dark-mode .artigo-descricao {
    color: #e0f2f1;
}

body.dark-mode .artigo-meta {
    color: #AEE1D0;
}

/* === PADRONIZAÇÃO REMOVIDA - AGORA UNIFICADA NO FINAL === */
    font-weight: bold;
}

.qty-input-carousel {
    width: 60px;
    padding: 8px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    text-align: center;
}

.btn-add-to-cart-carousel {
    background-color: #A67C52;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.btn-add-to-cart-carousel:hover {
    background-color: #8B6A42;
}

.btn-details-carousel {
    background-color: #A67C52;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #A67C52;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: auto; /* Empurra o botão para o final do card */
    display: block;
    font-size: 1em;
}

.btn-details-carousel:hover {
    background-color: transparent;
    color: #A67C52;
}

/* Cards de Categoria - Padrão Unificado */
.category-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.category-card-loja {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 20px 35px 0px rgba(210,180,140,0.4);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #E0E0E0;
}

.category-card-loja:hover {
    box-shadow: 0px 20px 35px 0px rgba(210,180,140,0.6);
    transform: translateY(-3px);
}

.category-card-loja img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    display: block;
    transition: transform 0.3s ease;
}

.category-card-loja:hover img {
    transform: scale(1.05);
}

.category-card-loja h3 {
    color: #004d40;
    margin: 20px 20px 10px;
    font-size: 1.4em;
    font-family: "Playfair Display", serif;
}

.category-card-loja .btn-secondary {
    background-color: #A67C52;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    margin: 0 20px 20px;
    transition: all 0.3s ease;
    border: 2px solid #A67C52;
    display: block;
}

.category-card-loja .btn-secondary:hover {
    background-color: transparent;
    color: #A67C52;
}

/* Modo Escuro - Cards removidos - agora unificados */

body.dark-mode .product-actions-carousel label {
    color: #AEE1D0;
}

body.dark-mode .qty-input-carousel {
    background-color: #2c3e50;
    border-color: #3a8f6b;
    color: #e0f2f1;
}

body.dark-mode .btn-add-to-cart-carousel {
    background-color: #D2B48C;
    color: #1a2e29;
}

body.dark-mode .btn-add-to-cart-carousel:hover {
    background-color: #C4A484;
}

body.dark-mode .btn-details-carousel {
    background-color: #D2B48C;
    color: #1a2e29;
    border-color: #D2B48C;
}

body.dark-mode .btn-details-carousel:hover {
    background-color: transparent;
    color: #D2B48C;
}

/* Modo Escuro - Cards de Categoria */
body.dark-mode .category-card-loja {
    background: #1a2e29;
    border-color: #3a8f6b;
    box-shadow: 0px 20px 35px 0px rgba(0,0,0,0.7);
}

body.dark-mode .category-card-loja h3 {
    color: #AEE1D0;
}

body.dark-mode .category-card-loja .btn-secondary {
    background-color: #D2B48C;
    color: #1a2e29;
    border-color: #D2B48C;
}

body.dark-mode .category-card-loja .btn-secondary:hover {
    background-color: transparent;
    color: #D2B48C;
}

/* Ajustes para Swiper na Loja */
.novidades-swiper .swiper-slide,
    height: auto;
}

/* Responsividade para Cards da Loja */
@media (max-width: 768px) {
    .category-grid-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-actions-carousel {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .product-actions-carousel label {
        text-align: center;
    }
    
    .qty-input-carousel {
        width: 100%;
        max-width: 120px;
        margin: 0 auto;
    }
}

/* === FIM PADRONIZAÇÃO VISUAL DA LOJA === */


/* === ESTILOS ADICIONAIS PARA SEÇÕES DA LOJA === */

/* Seção de Banner da Loja */
.store-banner-section {
    margin-bottom: 40px;
    text-align: center;
}

.store-banner-section img {
    border-radius: 12px;
    box-shadow: 0px 15px 30px 0px rgba(210,180,140,0.3);
    transition: transform 0.3s ease;
}

.store-banner-section img:hover {
    transform: scale(1.02);
}

.store-banner-section h2 {
    margin-top: 20px;
    color: #E2725B;
    font-size: 1.8em;
}

/* Seção de Busca e Filtros */
.store-search-filter-section {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0px 10px 25px 0px rgba(210,180,140,0.2);
    border: 1px solid #E0E0E0;
}

.search-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.search-bar input[type="search"] {
    flex: 1;
    max-width: 400px;
    padding: 12px 16px;
    border: 2px solid #E0E0E0;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.search-bar input[type="search"]:focus {
    outline: none;
    border-color: #50C878;
}

.search-bar button {
    background-color: #50C878;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-bar button:hover {
    background-color: #004D40;
}

.filters p {
    color: #757575;
    margin: 0;
    font-style: italic;
}

/* Títulos das Seções da Loja */
.store-featured-products-section h2,
.store-categories-section h2 {
    margin-bottom: 30px;
    color: #004D40;
    font-size: 2.2em;
    position: relative;
}

.store-featured-products-section h2::after,
.store-categories-section h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #50C878;
    border-radius: 2px;
}

/* Navegação do Swiper */
.swiper-button-next,
.swiper-button-prev {
    color: #50C878 !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Paginação do Swiper */
.swiper-pagination-bullet {
    background: #50C878 !important;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
}

/* Modo Escuro - Seções da Loja */
body.dark-mode .store-banner-section h2 {
    color: #ff8a65;
}

body.dark-mode .store-search-filter-section {
    background: #1a2e29;
    border-color: #3a8f6b;
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.4);
}

body.dark-mode .search-bar input[type="search"] {
    background-color: #2c3e50;
    border-color: #3a8f6b;
    color: #e0f2f1;
}

body.dark-mode .search-bar input[type="search"]:focus {
    border-color: #AEE1D0;
}

body.dark-mode .search-bar input[type="search"]::placeholder {
    color: #9E9E9E;
}

body.dark-mode .search-bar button {
    background-color: #AEE1D0;
    color: #1a2e29;
}

body.dark-mode .search-bar button:hover {
    background-color: #50C878;
    color: white;
}

body.dark-mode .filters p {
    color: #9E9E9E;
}

body.dark-mode .store-featured-products-section h2,
body.dark-mode .store-categories-section h2 {
    color: #AEE1D0;
}

body.dark-mode .swiper-button-next,
body.dark-mode .swiper-button-prev {
    background: rgba(26, 46, 41, 0.9);
    color: #AEE1D0 !important;
}

body.dark-mode .swiper-button-next:hover,
body.dark-mode .swiper-button-prev:hover {
    background: rgba(26, 46, 41, 1);
}

/* Responsividade para Seções da Loja */
@media (max-width: 768px) {
    .store-search-filter-section {
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .search-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-bar input[type="search"] {
        max-width: none;
        margin-bottom: 10px;
    }
    
    .store-featured-products-section h2,
    .store-categories-section h2 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important; /* Ocultar navegação em mobile */
    }
}

/* === Estilos para Produtos em Destaque === */
.destaque-section {
  margin-bottom: 50px;
}

.destaque-swiper {
  position: relative;
  padding-bottom: 40px;
}

.destaque-pagination {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.destaque-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #3a8f6b;
  opacity: 0.4;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.destaque-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}

/* Navegação por setas */
.destaque-swiper .swiper-button-next,
.destaque-swiper .swiper-button-prev {
  color: #3a8f6b;
  background: rgba(255, 255, 255, 0.8);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.destaque-swiper .swiper-button-next::after,
.destaque-swiper .swiper-button-prev::after {
  font-size: 18px;
  font-weight: bold;
}

.destaque-swiper .swiper-button-next:hover,
.destaque-swiper .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Modo escuro */
body.dark-mode .destaque-pagination .swiper-pagination-bullet {
  background: #AEE1D0;
}

body.dark-mode .destaque-swiper .swiper-button-next,
body.dark-mode .destaque-swiper .swiper-button-prev {
  color: #AEE1D0;
  background: rgba(26, 46, 41, 0.8);
}

body.dark-mode .destaque-swiper .swiper-button-next:hover,
body.dark-mode .destaque-swiper .swiper-button-prev:hover {
  background: rgba(26, 46, 41, 1);
}

@media (max-width: 768px) {
  .destaque-swiper .swiper-button-next,
  .destaque-swiper .swiper-button-prev {
    display: none;
  }
}

/* === FIM ESTILOS ADICIONAIS PARA SEÇÕES DA LOJA === */


/* === CORREÇÃO COMPLETA DOS BOTÕES === */

/* Botões ADICIONAR - Seção Produtos em Destaque (VERDE) */
.novidades-swiper .btn-add-to-cart-carousel,

.swiper-slide .btn-add-to-cart-carousel {
    background-color: #4CAF50 !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 0.9em !important;
}

.novidades-swiper .btn-add-to-cart-carousel:hover,

.swiper-slide .btn-add-to-cart-carousel:hover {
    background-color: #45a049 !important;
}

    background-color: #4CAF50 !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 0.9em !important;
}

    background-color: #45a049 !important;
}

/* Botões VER DETALHES - PADRONIZAÇÃO COMPLETA */
.btn-details-carousel,
.product-card .btn-details-carousel,
.    display: block !important;
    font-size: 1em !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 48px !important;
    line-height: 1.2 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.btn-details-carousel:hover,
.product-card .btn-details-carousel:hover,
t;
    color: #A67C52 !important;
    border-color: #A67C52 !important;
}

/* === MODO ESCURO === */
/* Botões ADICIONAR no modo escuro (VERDE) */
body.dark-mode .novidades-swiper .btn-add-to-cart-carousel,
body.dark-mode 
body.dark-mode .swiper-slide .btn-add-to-cart-carousel,
    background-color: #4CAF50 !important;
    color: white !important;
}

body.dark-mode .novidades-swiper .btn-add-to-cart-carousel:hover,
body.dark-mode 
body.dark-mode .swiper-slide .btn-add-to-cart-carousel:hover,
    background-color: #45a049 !important;
}

/* Botões VER DETALHES no modo escuro */
}

@media (max-width: 768px) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 20px 0 !important;
        margin: 20px 0 !important;
        min-height: 400px !important;
    }
    
        display: block !important;
        visibility: visible !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 350px !important;
        position: relative !important;
    }
    
        display: flex !important;
        visibility: visible !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
    }
    
        display: block !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
        width: 280px !important;
        margin-right: 20px !important;
        opacity: 1 !important;
        transform: none !important;
        height: auto !important;
        position: relative !important;
    }
    
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 300px !important;
    }
    
    /* Força a exibição dos botões de navegação no mobile */
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        z-index: 10 !important;
    }
    
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        margin-top: 20px !important;
    }
    
    /* Força a renderização dos produtos no mobile */
        display: block !important;
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
    
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important;
    }
    
        display: block !important;
        margin-bottom: 10px !important;
    }
    
        display: block !important;
        margin-bottom: 5px !important;
    }
    
        display: block !important;
        margin-bottom: 10px !important;
    }
    
        display: flex !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 480px) {
        width: 250px !important;
    }
    
        max-width: 250px !important;
    }
}

/* === ESTILOS REMOVIDOS - AGORA UNIFICADOS === */
            justify-content: space-between;
        }
        
    color: #333;
        }
        

        

     margin-top: 10px;
            margin-bottom: 10px;
            padding: 0 5px;
        }
        
       margin-right: 10px;
        }
        
       }
        

        
        /* Modo escuro para Mais Vendidos */

        
        /* === FIM ESTILOS PARA MAIS VENDIDOS === */
        
/* === CORREÇÃO REMOVIDA - AGORA UNIFICADA === */

/* ========================================
   LOJA - CARDS UNIFICADOS (LIMPEZA CSS)
   ======================================== */

/* === CARDS BASE PARA LOJA === */
.store-page .product-card,
ore-page .product-card:hover,



/* === IMAGENS DOS CARDS === */
.store-page .product-card img,



.store-page .product-card:hover img,



/* === CONTEÚDO DOS CARDS === */
.store-page .product-info,



.store-page .product-card h3,yfair Display", serif;
    line-height: 1.3;
}

.store-page .product-brand,



.store-page .product-price,



/* === MODO ESCURO - CARDS DA LOJA === */
body.dark-mode .store-page .product-card,
-page .product-brand,



body.dark-mode .store-page .product-price,



/* === SWIPERS PADRONIZADOS === */



    display: flex;
    justify-content: center;
    align-items: stretch;
}

/* === RESPONSIVIDADE === */

}

/* ======================================== */