/* Importação da fonte do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap');

/* Geral */
body {
    font-family: 'Antic Didone', serif; /* Aplica a fonte a todos os textos */
    margin: 0;
    padding: 0;
    background-color: #ffd9c2; /* Fundo pêssego/bege claro da imagem */
    color: #402E2A; /* Cor de texto mais escura para contraste */
    display: flex;
    flex-direction: column;
    align-items: center;
}

footer {
    background-color: #8f6e5a; /* mantém sua cor original */
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
    padding: 40px 0 20px 0;
    text-align: left;
    width: 100%;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.footer-section {
    flex: 1;
    min-width: 220px;
    margin: 10px 20px;
}

.footer-section h3 {
    color: #f0f0f0;
    margin-bottom: 15px;
    font-size: 18px;
}

.footer-section p,
.footer-section a,
.footer-section li {
    color: #f0f0f0;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.6;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section a:hover {
    text-decoration: underline;
}

.social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.social-icons img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.social-icons img:hover {
    transform: scale(1.1);
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 30px;
    padding-top: 15px;
    font-size: 13px;
}



.container {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Header */
header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 50px; /* Ajuste para o espaçamento da imagem */
    box-sizing: border-box;
}

.logo-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-section .logo {
    height: 150px; /* Defina a altura desejada para a sua imagem de logo */
    width: auto; /* Mantém a proporção original da imagem */
    max-width: 200px; /* Garante que a logo não fique gigante em telas muito largas */
    object-fit: contain; /* Redimensiona a imagem para caber no contêiner mantendo a proporção */
}

.logo-section .logo-text { /* Nova classe se a logo for um texto e não uma imagem */
    font-family: 'serif'; /* Mantenha 'serif' se for um texto para o logo "DC" */
    font-size: 3em;
    font-weight: bold;
    color: #402E2A;
    line-height: 0.8;
}

.logo-section .logo-subtitle {
    font-size: 0.7em;
    color: #402E2A;
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Navigation */
nav {
    display: flex;
    justify-content: flex-end; /* Alinha os itens à direita */
    align-items: center;
    gap: 15px;
}

.nav-buttons {
    display: flex;
    gap: 10px;
}

.nav-buttons a {
    background-color: #8f6e5a; /* Cor dos botões de navegação */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

.nav-buttons a:hover {
    background-color: #8C7B74;
}

.cart-icon {
    position: relative;
    font-size: 2em;
    color: #402E2A;
}

.cart-icon .cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #E63946; /* Cor de destaque para a contagem */
    color: white;
    font-size: 0.6em;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 5px;
}

.profile-icon {
    font-size: 2em;
    color: #402E2A;
    margin-left: 10px;
}

.main-content {
    background-color: transparent; /* Remove o fundo branco da imagem anterior */
    box-shadow: none; /* Remove a sombra */
    text-align: left; /* Alinha o texto à esquerda */
    padding: 50px 0;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
}

.main-header h1 {
    font-size: 2.5em;
    font-weight: normal;
    color: #402E2A;
    margin: 0;
    max-width: 50%;
}

.main-title-box {
    background-color: #A08C86; /* Cor do fundo da caixa */
    color: white;
    padding: 15px 40px;
    border-radius: 10px;
    font-size: 2em;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transform: rotate(-5deg); /* Gira levemente a caixa, como na imagem */
}

.main-title-box span {
    white-space: nowrap;
}

.welcome-message h1 {
    /* 'font-family: serif' foi removido aqui pois a fonte agora é herdada do 'body' */
    font-size: 3em;
    color: #000000;
    margin-bottom: 10px;
}

.welcome-message p {
    font-size: 1.2em;
    color: #402E2A;
    margin-top: 0;
}

.product-selection {
    display: flex;
    justify-content: center;
    gap: 80px; /* Espaço entre os tipos de produtos */
    margin-top: 40px;
}

.products-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

.product-item {
    text-align: center;
}

.product-item h2 {
    font-size: 1.2em;
    font-weight: bold;
    color: #402E2A;
    margin-bottom: 20px;
}
.product-image {
    width: 250px; /* Tamanho do quadrado */
    height: 250px;
    background-color: #8f6e5a; /* Cor do fundo do quadrado */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Espaço interno para a imagem */
    box-sizing: border-box;
    transition: transform 0.3s ease;
    overflow: hidden; /* Garante que a imagem não transborde */
}

.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Redimensiona a imagem para caber no contêiner mantendo a proporção */
}

.product-image:hover {
    transform: scale(1.05);
}

/* Responsividade */
@media (max-width: 768px) {
    header {
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px;
    }

    .logo-section, nav {
        width: 100%;
        justify-content: center;
        margin-bottom: 15px;
    }

    .product-selection {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
}

/* Página de Ajuda */
.main-content.ajuda {
    text-align: center;
    padding: 50px 0;
}

.help-section {
    max-width: 600px;
    margin: 0 auto;
}

.help-intro {
    font-size: 1.5em;
    color: #402E2A;
    line-height: 1.6;
    margin-bottom: 30px;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.contact-name {
    background-color: #402E2A;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    min-width: 150px;
    text-align: right;
}

.contact-item a {
    color: #000000; /* Cor do texto */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 20px; /* Bordas arredondadas */
    text-decoration: none; /* Remove o sublinhado padrão */
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.contact-item a:hover {
    background-color: #8C7B74; /* Escurece a cor no hover */
}

/* Responsividade para a página de Ajuda */
@media (max-width: 768px) {
    .help-intro {
        font-size: 1.2em;
    }

    .contact-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 5px;
    }

    .contact-name {
        min-width: auto;
        padding: 8px 15px;
    }
}

/* Página de Cadastro */
.main-content {
    flex-grow: 1; /* Faz com que a seção de conteúdo principal ocupe o espaço restante */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centraliza o conteúdo verticalmente */
    padding: 50px 0;
    text-align: center;
}

.cadastro-section {
    position: relative;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.cadastro-title {
    font-size: 2.5em;
    color: #402E2A;
    margin-bottom: 20px;
}

.back-link {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2em;
    color: #402E2A;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

form {
    background-color: #8f6e5a;
    padding: 50px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

form input {
    background-color: white;
    color: #402E2A;
    padding: 15px 25px;
    border-radius: 30px;
    border: none;
    width: 80%;
    max-width: 300px;
    font-size: 1em;
    text-align: center;
    box-sizing: border-box;
}

form input::placeholder {
    color: #aaa;
    text-align: center;
}

form .btn {
    background-color: black;
    color: white;
    padding: 15px 40px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

form .btn:hover {
    background-color: #333;
}

.login-section {
    position: relative;
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.login-title {
    font-size: 2.5em;
    color: #402E2A;
    margin-bottom: 20px;
}

/* --- NOVAS REGRAS PARA A PÁGINA "SOBRE NÓS" --- */

/* Altera a cor de fundo apenas na página "Sobre nós" */
body.sobre-nos-body {
    background-color: #ffd9c2;
}

/* Define o layout de duas colunas para o container na página "Sobre nós" */
.sobre-nos-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px;
    flex-wrap: wrap;
    max-width: 1200px;
    padding: 20px;
}

.sobre-nos-aside {
    background-color: #d1b1a7;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 20px; /* Reduzindo o padding interno */
    flex: 0 0 200px; /* Reduzindo a largura fixa para 200px */
    text-align: center;
    color: #402E2A;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Adicionado margin-right para afastar um pouco mais do carrossel, se desejar */
    /* margin-right: 30px; */ 
}

.sobre-nos-aside h2 {
    color: #402E2A;
    font-size: 1.5em; /* Reduzindo o tamanho da fonte do título */
    margin-bottom: 15px; /* Ajustando a margem */
    border-bottom: none;
}

.social-box p {
    font-family: 'Arial', sans-serif;
    font-size: 1em; /* Reduzindo o tamanho da fonte do texto */
    font-weight: bold;
    color: #402E2A;
    margin-top: 8px; /* Ajustando a margem */
}

.instagram-logo {
    width: 35px; /* Reduzindo o tamanho da logo do Instagram */
    height: auto;
    margin-bottom: 8px; /* Ajustando a margem */
}


.social-box p {
    font-family: 'Arial', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    color: #402E2A;
    margin-top: 10px;
}

.instagram-logo {
    width: 40px;
    height: auto;
    margin-bottom: 10px;
}

/* Estiliza o conteúdo principal (main) da página "Sobre nós" */
.sobre-nos-main {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.sobre-nos-main .intro-section {
    margin-bottom: 30px;
    width: 100%;
}

.sobre-nos-main .intro-section h2 {
    color: #402E2A;
    font-size: 2.5em;
    border-bottom: none;
    margin-bottom: 10px;
}

.sobre-nos-main .intro-section p {
    color: #402E2A;
    font-size: 1.2em;
    line-height: 1.5;
}

/* Estilos do Carrossel para a página "Sobre Nós" */
.sobre-nos-main .carousel-section {
    width: 100%;
    margin-top: 0;
}

.sobre-nos-main .carousel-container {
    max-width: 500px;
    height: 400px;
    margin: 20px auto;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.sobre-nos-main .carousel-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.sobre-nos-main .carousel-slide.active {
    opacity: 1;
    z-index: 10;
}

/* Imagens quadradas 1:1*/
.sobre-nos-main .carousel-slide img {
    width: 200px;
    height: 200px;
    border-radius: 0;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    margin-bottom: 20px;
}

.sobre-nos-main .carousel-slide h4 {
    font-size: 1.8em;
    color: #402E2A;
    margin-top: 0;
    margin-bottom: 10px;
}

.sobre-nos-main .carousel-slide p {
    font-size: 1em;
    color: #402E2A;
    line-height: 1.6;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.sobre-nos-main .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(64, 46, 42, 0.7);
    color: white;
    border: none;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 1.8em;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    z-index: 100;
}

.sobre-nos-main .carousel-btn.prev {
    left: 10px;
}

.sobre-nos-main .carousel-btn.next {
    right: 10px;
}

.sobre-nos-main .carousel-btn:hover {
    background-color: rgba(64, 46, 42, 0.9);
}

/* Responsividade para a página "Sobre Nós" */
@media (max-width: 768px) {
    .sobre-nos-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    sobre-nos-aside {
        flex: auto;
        width: 100%;
        max-width: 250px; /* Limita a largura da sidebar em mobile */
        padding: 15px; /* Reduz padding em mobile */
        margin-bottom: 20px;
        order: -1;
    }

    .sobre-nos-aside h2 {
        font-size: 1.3em; /* Ajusta o tamanho do título em mobile */
    }

    .social-box p {
        font-size: 0.9em; /* Ajusta o tamanho do texto em mobile */
    }

    .instagram-logo {
        width: 30px; /* Ajusta o tamanho da logo em mobile */
    }

    .sobre-nos-main {
        padding: 0 10px;
    }

    .sobre-nos-main .carousel-container {
        height: 350px;
    }

    .sobre-nos-main .carousel-slide img {
        width: 150px;
        height: 150px;
    }

    .sobre-nos-main .carousel-slide h4 {
        font-size: 1.5em;
    }

    .sobre-nos-main .carousel-slide p {
        font-size: 0.9em;
    }

    .sobre-nos-main .carousel-btn {
        padding: 8px 12px;
        font-size: 1.5em;
    }
}

/* Estilo para a tabela de usuários */
.tabela-usuarios {
    width: 100%;
    border-collapse: separate;   /* permite bordas arredondadas */
    border-spacing: 0;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Cabeçalho */
.tabela-usuarios th {
    background-color: #8f6e5a;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 14px 18px;
    white-space: nowrap; /* evita quebrar texto longo */
}

/* Linhas */
.tabela-usuarios td {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle; /* centraliza imagem e botões */
    max-width: 200px;       /* impede células gigantes */
    word-wrap: break-word;  /* quebra descrição longa */
}

.tabela-usuarios tr:nth-child(even) {
    background-color: #f9f9f9;
}

.tabela-usuarios tr:hover {
    background-color: #e6f2f3;
    transition: 0.3s;
}

/* Imagens dentro da tabela */
.tabela-usuarios img {
    max-width: 80px;
    max-height: 80px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* Coluna de ações */
.tabela-usuarios td.acoes {
    white-space: nowrap; /* impede quebra de linha */
    text-align: center;
}

/* Botões de ação */
.btn-add, .btn-edit, .btn-delete {
    display: inline-block;
    margin: 2px 4px;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}

.btn-add {
    background-color: #4CAF50;
    color: #fff;
}
.btn-add:hover { background-color: #45a049; }

.btn-edit {
    background-color: #00a2ff;
    color: #fff;
}
.btn-edit:hover { background-color: #008bd6; }

.btn-delete {
    background-color: #e63946;
    color: #fff;
}
.btn-delete:hover { background-color: #c82333; }

.icon-proibido {
    max-width: 200px;   
    width: 40%;         
    height: auto;       
    margin: 30px 0;     /* espaçamento em cima e embaixo */
}

/* Container do carrinho (Estilos antigos que serão substituídos abaixo, mas mantidos para compatibilidade) */
.cart-container {
    width: 90%;
    max-width: 900px;
    margin: 40px auto;
    padding: 40px;
    background-color: #8f6e5a; /* marrom médio */
    border-radius: 20px;
    text-align: center;
    color: white;
}

/* Título Carrinho */
.cart-title {
    font-size: 32px;
    font-weight: bold;
    color: #000; /* preto */
    margin-bottom: 30px;
}

/* Lista de itens */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cart-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 40px;
}

.cart-item:hover {
    transform: translateY(-3px);
}

/* Imagem */
.cart-img-box {
    background: #fff;
    border-radius: 15px;
    padding: 15px;
    flex: 0 0 120px;
}

.cart-img {
    width: 200px;
    height: auto;
}

/* Informações */
.cart-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.cart-info h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.cart-info p {
    margin: 4px 0;
    font-size: 15px;
    color: #666;
}

/* Botão remover */
.cart-remove {
    flex: 0 0 auto;
}

/* Correção no CSS para o botão de QTD */
.cart-info-box.qtd-box { /* Nova classe para diferenciar o botão de QTD */
    display: flex;
    justify-content: space-between; /* Espaça os elementos */
    align-items: center;
    width: 90%; /* Limita a largura do container QTD */
    max-width: 300px;
    margin: 0 auto; /* Centraliza a caixa QTD */
}

.cart-info-box.qtd-box .btn-comum {
    padding: 5px 10px;
    font-size: 0.8em;
    flex-shrink: 0; /* Impede que o botão encolha */
}

.btn-remove {
    padding: 8px 14px;
    border: none;
    background: #ff4d4d;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.btn-remove:hover {
    background: #d93636;
}

/* Resumo */
.cart-summary {
    margin-top: 30px;
    text-align: right;
}

.cart-summary h2 {
    font-size: 24px;
    font-weight: bold;
    color: #222;
}

.cart-summary span {
    color: #28a745;
    font-weight: bold;
}

/* Botão finalizar (estilo antigo) */
.btn-finalizar {
    display: inline-block;
    margin: 20px auto;
    padding: 12px 30px;
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-left: 270px;
}

.btn-limpar {
    display: inline-block;
    margin: 20px auto;
    padding: 12px 30px;
    background: white;
    color: red;
    border-radius: 50px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
    margin-left: 80px;
}

.btn_carrinho{
    text-align: center;
}

.btn-finalizar:hover {
    background: #f2f2f2;
}

/* Link Voltar */
.cart-back {
    display: block;
    margin-top: 20px;
    font-size: 14px;
    color: #000;
    text-decoration: underline;
}

.privacy {
    background: #fff;
    color: #000;
    padding: 6px 20px;
    border-radius: 50px;
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}

/* Carrinho vazio */
.empty-cart {
    text-align: center;
    font-size: 18px;
    color: #555;
    margin: 50px 0;
}

.cart-info p:last-child {
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

.cart-info-box {
    background: #fff;
    color: #000;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    min-width: 200px;
    text-align: center;
}

/* --- RESPONSIVIDADE ESPECÍFICA PARA CANECAS E PULSEIRAS --- */
@media (max-width: 768px) {

    /* 1. Empilha o header verticalmente e centraliza tudo */
    header {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        gap: 15px;
        flex-wrap: nowrap;
    }

    /* 2. Ajusta a logo e a navegação para o layout vertical */
    .logo-section, nav {
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
    }

    /* 3. Ajusta o tamanho da logo para telas pequenas */
    .logo-section .logo {
        height: 100px;
        margin: 0 auto;
    }

    /* 4. AÇÃO PRINCIPAL: Reduz os botões para ~30% do tamanho original */
    .nav-buttons a {
        /* Tamanho Desktop: padding: 10px 20px; font-size: 1em; */
        /* Tamanho Mobile (30%): */
        padding: 3px 6px;
        font-size: 0.7em;
        border-radius: 12px;
    }

    /* 5. Garante que os botões fiquem centralizados e próximos */
    .nav-buttons {
        display: flex;
        flex-wrap: wrap; /* Permite que os botões quebrem a linha se necessário */
        justify-content: center;
        gap: 5px; /* Espaçamento entre os botões pequenos */
    }


    /* 6. Esconde a mensagem "Olá" e quebras de linha para um visual limpo */
    .nav-buttons br {
        display: none;
    }

    /* 7. Ajusta o ícone de perfil/logout */
    .nav > .btn-logout, .nav > .profile-icon {
        margin-top: 10px;
    }

    /* Esconde a mensagem "Olá" e quebras de linha para economizar espaço */
    .nav-buttons br {
        display: none;
    }

    /* Mantém as outras regras responsivas que você já tem */
    .product-selection {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    /* Ajusta o título e centraliza */
    .main-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .main-header h1 {
        font-size: 1.6em;
        max-width: 100%;
    }

    .main-title-box {
        font-size: 1.6em;
        padding: 10px 25px;
        transform: none; /* Remove rotação para caber melhor em telas pequenas */
    }

    /* Ajuste da grade de produtos */
    .products-grid {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

    .product-item {
        width: 100%;
        max-width: 320px;
    }

    .product-item h2 {
        font-size: 1.1em;
        margin-bottom: 15px;
    }

    /* Quadrado da imagem */
    .product-image {
        width: 200px;
        height: 200px;
        margin: 0 auto 10px auto;
    }

    /* Botões de navegação laterais */
    .product-item .prev-btn,
    .product-item .next-btn {
        position: relative;
        display: inline-block;
        margin: 10px;
        padding: 8px 14px;
        font-size: 1.2em;
        border-radius: 8px;
    }

    /* Centraliza os botões abaixo da imagem */
    .product-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* --- Responsividade para a Página do Carrinho --- */
    /* *** ATUALIZADO: Usando 95% e impedindo vazamento *** */
    .cart-container {
        width: 95%; /* Aumenta para usar mais a tela em mobile */
        max-width: 100%; /* Permite que ele use toda a largura disponível */
        padding: 20px;
        margin: 20px auto;
        box-sizing: border-box; 
    }

    .cart-title {
        font-size: 26px; /* Reduz o tamanho do título */
        margin-bottom: 25px;
    }

    .cart-item {
        flex-direction: column; /* Imagem fica em cima das informações */
        align-items: center;    /* Centraliza os itens empilhados */
        gap: 20px;              
        margin-bottom: 25px; /* Reduz margem inferior */
    }

    .cart-img-box {
        flex-basis: auto; 
        padding: 15px; /* Reduz padding da caixa da imagem */
    }

    .cart-img {
        width: 120px; /* Reduz o tamanho da imagem do produto */
        height: 120px;
    }

    .cart-info {
        width: 90%; /* Limita a largura do bloco de info no mobile */
        align-items: center; /* Centraliza os botões */
        max-width: 300px;
    }

    .cart-info-box {
        min-width: unset; /* Remove a largura mínima que causa problemas */
        width: 100%; /* Usa 100% do .cart-info */
        margin-left: auto;
        margin-right: auto;
        font-size: 0.9em; /* Reduz a fonte */
        padding: 10px 20px;
    }
    
    /* Ajuste específico dos botões de quantidade (+ / -) */
    .cart-info-box a.btn-comum {
        padding: 4px 8px; /* Reduz o tamanho dos botões +/- em mobile */
        font-size: 0.7em;
    }

    .btn-finalizar {
        padding: 10px 25px;
        font-size: 15px;
    }
    
    /* Agrupamento de botões de ação final */
    .cart-actions {
        flex-direction: column;
        gap: 10px;
    }
    .cart-actions .btn-comum, .cart-actions .btn-finalizar, .cart-actions .btn-limpar {
        width: 100%; 
        max-width: 250px; 
        margin: 0 auto;
    }

    /* --- RESPONSIVIDADE DEFINITIVA PARA TABELAS (LAYOUT DE CARDS) --- */
    /* ... (Mantenha as regras de tabela existentes) ... */
    .tabela-responsiva {
        border: none;
        box-shadow: none;
        background-color: transparent;
    }

    .tabela-responsiva thead {
        display: none;
    }

    .tabela-responsiva, .tabela-responsiva tbody, .tabela-responsiva tr, .tabela-responsiva td {
        display: block;
        width: 100%;
    }

    .tabela-responsiva tr {
        margin-bottom: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        padding: 15px;
        box-sizing: border-box;
        border-left: 5px solid #8f6e5a;
    }

    /* Estilo das células (TD) dentro do card */
    .tabela-responsiva td {
        padding: 8px 8px 8px 45%; /* Padding ajustado para a fonte menor */
        position: relative;
        border-bottom: 1px solid #f0f0f0;
        text-align: left;
        min-height: 18px;
        font-size: 0.9em; /* NOVO: Reduz o tamanho da fonte do dado (valor) */
    }

    .tabela-responsiva td:last-child {
        border-bottom: none;
    }

    /* Cria as etiquetas (labels) */
    .tabela-responsiva td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 40%;
        padding-right: 10px;
        font-weight: bold;
        text-align: left;
        white-space: nowrap;
        color: #402E2A;
        font-size: 0.85em; /* NOVO: Reduz o tamanho da fonte da etiqueta (ex: "Nome") */
    }

    /* Ajusta a célula de ações */
    .tabela-responsiva td.acoes {
        text-align: left;
    }

    /* Reduz o tamanho dos botões de ação dentro do card */
    .tabela-responsiva td.acoes .btn-edit,
    .tabela-responsiva td.acoes .btn-delete {
        padding: 4px 8px;
        font-size: 0.8em;
    }
}

/* --- POPUP DE ERRO --- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(64, 46, 42, 0.6); /* fundo escuro semi-transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.popup-box {
    background: #fff;
    padding: 30px 40px;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    animation: popupAnim 0.4s ease;
    position: relative;
}

.popup-box h2 {
    margin-top: 0;
    font-size: 1.8em;
    color: #e63946;
}

.popup-box p {
    font-size: 1.1em;
    color: #402E2A;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5em;
    cursor: pointer;
    color: #666;
    transition: color 0.2s;
}

.popup-close:hover {
    color: #000;
}

/* Animação */
@keyframes popupAnim {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ======== PRODUTOS (SELECT DO BANCO) ======== */
.products-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.product-card {
    background-color: #6b4b3e; /* cor do fundo */
    border: 4px solid #6b4b3e; /* marrom */
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    width: 250px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
    transform: scale(1.05);
    box-shadow: 4px 6px 15px rgba(0, 0, 0, 0.2);
}

.product-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
}

.product-card img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: 6px;
}

.product-card p {
    font-size: 0.9rem;
    margin: 0.5rem 0;
    color: white;
}

.product-card .price {
    display: block;
    margin-top: 0.5rem;
    font-weight: bold;
    color: #222;
    font-size: 1rem;
}

/* =============================================== */
/* === ESTILOS E CORREÇÕES PARA A PÁGINA DO CARRINHO === */
/* =============================================== */

/* Container principal que centraliza o conteúdo */
.cart-page-content {
    display: flex;
    justify-content: center;
    align-items: center; /* Alinha no topo em telas menores */
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    min-height: 80vh; /* Garante que o conteúdo ocupe a tela */
}

/* Container marrom com bordas arredondadas */
.cart-container {
    width: 100%;
    max-width: 600px;
    padding: 30px;
    background-color: #8f6e5a; 
    border-radius: 30px; 
    text-align: center;
    color: #000; 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    margin: 20px 0;
}

/* Título "Carrinho" */
.cart-title {
    font-size: 2.5em; 
    font-weight: normal;
    color: #000;
    margin: 0 0 30px 0; 
    font-family: 'Antic Didone', serif;
}

/* Container para um item de produto (imagem + infos) */
.cart-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; 
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Separador sutil */
}
/* Remove a borda do último item para não ficar sobrando */
.cart-item:last-of-type {
    border-bottom: none;
    margin-bottom: 10px;
}

/* Caixa branca para a imagem do produto */
.cart-img-box {
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    flex-shrink: 0;
    width: 120px;  /* Tamanho fixo para consistência */
    height: 120px; /* Tamanho fixo para consistência */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagem do produto */
.cart-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Container para os botões de informação à direita */
.cart-info {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    gap: 15px; 
    width: 100%;
    max-width: 250px;
}

/* Estilo dos "botões" brancos (Informações e QTD) */
.cart-info-box {
    background: #fff;
    color: #000;
    padding: 12px 20px; /* Padding ajustado */
    border-radius: 50px; 
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    width: 100%; 
    min-width: unset; /* Garante que a regra do inline style seja removida */
    border: none;
    font-family: 'Antic Didone', serif;
    box-sizing: border-box;
    display: flex; /* Adicionado para centralizar conteúdo interno */
    align-items: center; /* Adicionado para centralizar conteúdo interno */
    justify-content: space-around; /* Adicionado para espaçar itens (como no QTD) */
}

/* Container para os botões de ação abaixo dos itens */
.cart-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
    justify-content: center; /* Centraliza os botões */
    align-items: center;
    gap: 15px;
}

/* Botões (regras unificadas para evitar repetição) */
.btn-finalizar, .btn-comum, .privacy {
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}
.btn-finalizar:hover, .btn-comum:hover, .privacy:hover {
    transform: translateY(-2px);
}

.btn-finalizar {
    background: #fff;
    color: #000;
    font-size: 1.1em;
}
.btn-comum {
    background: #d1b1a7; /* Cor mais suave para combinar */
    color: #402E2A;
    font-size: 1em;
}
.privacy {
    background: transparent;
    color: #000;
    font-size: 0.9em;
    text-decoration: underline;
    padding: 8px 20px;
}

/* Link "Voltar para o início" */
.cart-back {
    display: block;
    margin-top: 25px;
    font-size: 1em;
    color: #000;
    text-decoration: underline;
}

/* Mensagem de carrinho vazio */
.empty-cart {
    color: white;
    font-size: 1.2em;
    padding: 40px 0;
}


/* =============================================== */
/* ===     INÍCIO DA SEÇÃO DE RESPONSIVIDADE     === */
/* =============================================== */

@media (max-width: 768px) {

    .cart-container {
        /* O container marrom ocupa a tela toda, sem bordas arredondadas e menos padding */
        width: 100%;
        margin: 0;
        padding: 20px;
        border-radius: 0;
        box-shadow: none;
    }

    .cart-item {
        /* A MÁGICA: O layout do item muda de linha para coluna */
        flex-direction: column;
        gap: 15px; /* Espaçamento menor entre a imagem e as infos */
    }

    .cart-info {
        /* A área de informações agora pode usar a largura total disponível */
        max-width: 100%;
    }

    .cart-actions {
        /* Garante que os botões usem a largura total e fiquem bem empilhados */
        flex-direction: column;
        width: 100%;
    }

    .btn-finalizar, .btn-comum {
        width: 100%; /* Botões ocupam a largura toda */
        box-sizing: border-box;
    }
}

.imagem-index{
    width: 436px;
    height: 293px;
    object-fit: cover;
}

.mvv {
    gap: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    background-color: #d1b1a7;
    border-radius: 15px;
    padding: 20px;
    
  }
  
  .mvv-item {
    width: 350px;
  }

  .mvv-item ul {
    list-style-position: inside;
    padding-left: 0;
    margin: 0;
    text-align: left;
    margin-left: 40px;
  }

  .mvv-item li {
    margin-bottom: 8px;
  }

  aside.mvv{
    flex: 1;
    margin-left: 50px;
  }

  
/* Responsividade */
@media (max-width: 768px) {
    .mvv {
        flex-direction: column;
        align-items: center;
        padding: 15px 10px;
        gap: 15px;
    }

    .mvv-item {
        width: 100%;
        max-width: 400px;
    }
}