/* =====================================================
   RESPONSIVE UNIFICADO — Aviarmada
   Todos os @media queries de app.css, estilos e responsive.css
   Organizados por breakpoint
   ===================================================== */

/* =========================================
   TABLET — @media (max-width: 1024px)
   ========================================= */
@media (max-width: 1024px) {

/* ==========================================================================
   FORÇAR O SITE A OCUPAR 100% DO ECRÃ (FIM DO BURACO À DIREITA)
   ========================================================================== */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* A MARRETA FINAL: Esconde qualquer elemento que tente alargar a página */
    overflow-x: hidden !important; 
}


.conta-content {
        /* Ocupa o ecrã todo, mas mete uma "parede" de 15px de cada lado (igual ao menu) */
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 1. Cortar as margens negativas do Bootstrap que puxam os cartões para fora */
    .conta-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 2. Remover o padding interno das colunas para os cartões baterem certo com a linha */
    .conta-content [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ——— GRID PRODUTOS ——— */
    .produtos-grid--4,
    .produtos-grid--3,
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ——— DESTAQUES ——— */
    .destaques-grid {
        grid-template-columns: 1fr !important;
    }

    /* ——— BANNERS COUNTDOWN ——— */
    .banners-grid {
        grid-template-columns: 1fr !important;
    }

    /* ——— HERO ——— */
    .hero__text h1 {
        font-size: 2rem !important;
    }

    /* ——— LOJA ——— */
    .loja-sidebar {
        display: none !important;
    }

    .loja-layout {
        grid-template-columns: 1fr !important;
    }

    /* ——— CONTA STATS ——— */
    .conta-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ——— FOOTER ——— */
    .footer__grid {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================
   MOBILE — @media (max-width: 768px)
   ========================================= */
@media (max-width: 768px) {


/* ==========================================================================
   FORÇAR O SITE A OCUPAR 100% DO ECRÃ (FIM DO BURACO À DIREITA)
   ========================================================================== */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* A MARRETA FINAL: Esconde qualquer elemento que tente alargar a página */
    overflow-x: hidden !important; 
}




.conta-content {
        /* Ocupa o ecrã todo, mas mete uma "parede" de 15px de cada lado (igual ao menu) */
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 1. Cortar as margens negativas do Bootstrap que puxam os cartões para fora */
    .conta-content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* 2. Remover o padding interno das colunas para os cartões baterem certo com a linha */
    .conta-content [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

   .tabela-produtos-favoritos {
        table-layout: fixed !important; 
        width: 100% !important;
    }

    /* 1. O TRUQUE DE MESTRE: Esconder o cabeçalho no telemóvel */
    .tabela-produtos-favoritos thead {
        display: none !important;
    }

    /* Ajuste geral das linhas */
    .tabela-produtos-favoritos td {
        padding: 0.75rem 0.25rem !important; /* Dá um bom espaço para o dedo clicar */
        vertical-align: middle !important;
        border-bottom: 1px solid #f1f5f9 !important; /* Linha separadora suave */
    }

    /* 2. IMAGEM */
    .tabela-produtos-favoritos td:nth-child(1) {
        width: 65px !important;
        text-align: center !important;
    }
    
    .tabela-produtos-favoritos img {
        max-width: 55px !important;
        height: auto !important;
        padding: 0 !important;
    }

    /* 3. NOME DO PRODUTO (Expande para o espaço livre) */
    .tabela-produtos-favoritos td:nth-child(2) {
        width: auto !important; 
        text-align: left !important;
        padding-left: 10px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        white-space: normal !important; /* Deixa o nome quebrar de linha se for muito grande */
    }

    /* 4. PREÇO (Blindado contra quebras de linha) */
    .tabela-produtos-favoritos td:nth-child(3) {
        width: 80px !important; 
        text-align: center !important; /* Fica melhor encostado ao lixo */
        font-size: 14px !important;
        font-weight: bold !important;
        white-space: nowrap !important; /* PROÍBE O TEXTO DE EMPILHAR VERTICALMENTE */
        padding-right: 15px !important;
    }

    /* 5. CAIXOTE DO LIXO */
    .tabela-produtos-favoritos td:nth-child(4) {
        width: 40px !important; 
        text-align: center !important;
    }
    /* ——— CUSTOM MOBILE SCROLL ——— */
    .custom-mobile-scroll {
        overflow-x: visible !important;
        margin-bottom: 24px;
    }

    /* ——— TABELA CARRINHO (Vira Cartões) ——— */
    .carrinho-table {
        min-width: 100% !important;
        display: block;
    }

    .carrinho-table thead {
        display: none;
    }

    .carrinho-table tbody {
        display: block;
        width: 100%;
    }

    .carrinho-table tr {
        display: grid;
        grid-template-columns: 80px 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 8px 12px;
        padding: 16px;
        margin-bottom: 16px;
        background-color: transparent !important;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .carrinho-table tbody tr:last-child {
        border-bottom: none !important;
    }

    .carrinho-table td {
        display: block;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    /* Posições cirúrgicas no cartão */
    .carrinho-table td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: center;
        text-align: center !important;
    }

    .carrinho-table td:nth-child(1) img {
        width: 100%;
        height: auto;
    }

    .carrinho-table td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-size: 11px;
        color: #888;
        width: auto !important;
    }

    .carrinho-table td:nth-child(3) {
        grid-column: 2 / 4;
        grid-row: 2;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.3;
    }

    .carrinho-table td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
    }

    .carrinho-table td:nth-child(5) {
        display: none !important;
    }

    .carrinho-table td:nth-child(6) {
        grid-column: 3;
        grid-row: 3;
        font-size: 16px;
        font-weight: 900;
        color: var(--cor-principal, #c9142b);
        align-self: end;
        text-align: right !important;
    }

    .carrinho-table td:nth-child(7) {
        grid-column: 3;
        grid-row: 1;
        text-align: right !important;
    }

    /* ——— TABELA PRODUTOS NA GAVETA ——— */
    .tabela-produtos-gaveta {
        min-width: 100% !important;
        display: block;
    }

    .tabela-produtos-gaveta thead {
        display: none;
    }

    .tabela-produtos-gaveta tbody {
        display: block;
        width: 100%;
    }

    .tabela-produtos-gaveta tr {
        display: grid;
        grid-template-columns: 65px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto auto;
        gap: 6px 16px;
        padding: 16px 8px !important;
        border-bottom: 1px solid var(--gray, #e2e8f0) !important;
        background-color: transparent !important;
    }

    .tabela-produtos-gaveta tbody tr:last-child {
        border-bottom: none !important;
    }

    .tabela-produtos-gaveta td {
        display: block;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .tabela-produtos-gaveta td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
        margin-top: 4px;
    }

    .tabela-produtos-gaveta td:nth-child(1) img {
        width: 100%;
        height: auto;
    }

    .tabela-produtos-gaveta td:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.3;
    }

    .tabela-produtos-gaveta td:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
        font-size: 11px;
        color: #888;
    }

    .tabela-produtos-gaveta td:nth-child(4) {
        grid-column: 2;
        grid-row: 3;
        font-size: 13px;
        color: #666;
    }

    .tabela-produtos-gaveta td:nth-child(4)::before {
        content: "Qtd: ";
        font-weight: 600;
        color: #333;
    }

    .tabela-produtos-gaveta td:nth-child(5) {
        display: none !important;
    }

    .tabela-produtos-gaveta td:nth-child(6) {
        grid-column: 3;
        grid-row: 3;
        font-size: 16px;
        font-weight: 900;
        align-self: end;
        text-align: right !important;
    }

    /* ——— TABELA "ÚLTIMOS PRODUTOS" ——— */
    .tabela-ultimos-produtos {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        border: 1px solid var(--cor-principal, #F97316) !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .tabela-ultimos-produtos thead {
        display: none !important;
    }

    .tabela-ultimos-produtos tbody {
        display: block !important;
        width: 100% !important;
    }

    .tabela-ultimos-produtos tr {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        position: relative !important;
        padding: 16px 16px 16px 100px !important;
        min-height: 110px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background-color: #fff !important;
        box-sizing: border-box !important;
    }

    .tabela-ultimos-produtos tr:last-child {
        border-bottom: none !important;
    }

    .tabela-ultimos-produtos td:nth-child(1) {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 70px !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
    }

    .tabela-ultimos-produtos td:nth-child(1) img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .tabela-ultimos-produtos td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .tabela-ultimos-produtos td:nth-child(2) {
        color: #94a3b8 !important;
        font-size: 11px !important;
        text-transform: uppercase;
        margin-bottom: 2px !important;
    }

    .tabela-ultimos-produtos td:nth-child(3) {
        color: #334155 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
    }

    .tabela-ultimos-produtos td:nth-child(4) {
        color: #64748b !important;
        font-size: 12px !important;
        margin-bottom: 12px !important;
        line-height: 1.3;
    }

    .tabela-ultimos-produtos td:nth-child(5) {
        font-size: 14px !important;
        font-weight: bold !important;
        color: var(--cor-principal, #F97316) !important;
    }

    .tabela-ultimos-produtos td:nth-child(5)::before {
        content: "Qtd: ";
        font-weight: normal !important;
        color: #64748b !important;
    }

    /* ——— SCROLL HORIZONTAL ——— */
    .table-responsive {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    .tabela-encomendas-limpa,
    .tabela-produtos-gaveta,
    .tabela-ultimos-produtos,
    .tabela-encomendas-limpa tbody tr,
    .tabela-produtos-gaveta tbody tr,
    .tabela-ultimos-produtos tbody tr,
    .gaveta-row,
    .gaveta-cell {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ——— PAGINAÇÃO ——— */
    .paginacao-simples p.small.text-muted {
        display: none !important;
    }

    .paginacao-simples nav>div.d-sm-flex {
        justify-content: center !important;
        width: 100%;
    }

    .paginacao-simples .pagination {
        margin: 0 auto !important;
        gap: 6px;
    }

    .paginacao-simples .page-item:first-child .page-link,
    .paginacao-simples .page-item:last-child .page-link {
        font-size: 0 !important;
        color: transparent !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .paginacao-simples .page-item:first-child .page-link::after {
        content: "«";
        font-size: 18px !important;
        color: #555;
        line-height: 1;
    }

    .paginacao-simples .page-item:last-child .page-link::after {
        content: "»";
        font-size: 18px !important;
        color: #555;
        line-height: 1;
    }

    .paginacao-simples .page-item:first-child .page-link:hover::after,
    .paginacao-simples .page-item:last-child .page-link:hover::after {
        color: #ffffff !important;
    }

    /* ——— HERO ——— */
    .hero__inner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 2rem 1rem !important;
        min-height: auto !important;
    }

    .hero__image {
        display: none !important;
    }

    .hero__text h1 {
        font-size: 1.8rem !important;
    }

    .hero__text p {
        font-size: 14px !important;
    }

    /* ——— HEADER ——— */
    .header__inner {
        flex-wrap: wrap !important;
    }

    .header__search {
        order: 3 !important;
        width: 100% !important;
    }

  /* ==========================================================
       NAVBAR__INNER - TUDO NUMA SÓ LINHA
       ========================================================== */
    .navbar__inner {
        display: flex !important;
        flex-direction: row !important; /* Força tudo a ficar na horizontal */
        flex-wrap: nowrap !important; /* <-- A MAGIA: Proíbe estritamente qualquer quebra de linha */
        align-items: center !important;
        justify-content: space-between !important; /* Distribui o espaço entre os elementos */
        width: 100% !important;
        overflow: visible !important; /* Mantém o dropdown livre para cair */
        white-space: nowrap !important; /* Impede o texto de partir a meio */
    }

    /* Opcional: Se quiseres garantir que os próprios botões (Início, Sobre, Loja) também não formam 2 linhas de todo */
    .navbar__menu {
        flex-wrap: nowrap !important; 
    }

    /* ==========================================================
       FORÇA O CABEÇALHO PARA A FRENTE DE TUDO (Z-INDEX FIX)
       ========================================================== */
    header, 
    .header, 
    .header__inner {
        position: relative !important;
        z-index: 999999 !important; /* Dá a força máxima ao cabeçalho inteiro */
    }

    .navbar__menu li {
        width: auto !important; /* Cada botão ocupa apenas o espaço da sua palavra */
        position: static !important; /* Permite que o submenu ignore o botão e ocupe o ecrã todo */
    }

    .navbar__menu li a {
        padding: 10px 8px !important; 
        font-size: 13px !important;
        display: inline-block !important; 
        white-space: nowrap !important; /* Impede que a palavra parta ao meio (ex: "Con-tactos") */
    }

    /* ==========================================================
       DROPDOWN MOBILE - Caixa Flutuante Larga (Ecrã Todo)
       ========================================================== */
    .has-dropdown > ul,
    .has-dropdown .submenu {
        display: none; 
    }

    /* Quando tocas na "Loja" (JavaScript mete o .ativo) */
    .has-dropdown.ativo > ul,
    .has-dropdown.ativo .submenu {
        display: block !important;
        position: absolute !important; /* Flutua livremente por cima do site */
        top: 100% !important; /* Nasce logo a seguir à linha do menu principal */
        left: 0 !important; /* Cola à extrema esquerda do ecrã */
        width: 100% !important; /* Estica de ponta a ponta */
        background-color: #ffffff !important;
        z-index: 99999 !important; /* Força máxima para tapar os produtos de baixo */
        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important; /* Sombreado para destacar */
        margin-top: 5px !important;
        padding: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* Arrumação dos sub-links lá dentro */
    .has-dropdown.ativo > ul li,
    .has-dropdown.ativo .submenu li {
        width: 100% !important;
        display: block !important;
    }

    .has-dropdown.ativo > ul li a,
    .has-dropdown.ativo .submenu li a {
        padding: 12px 20px !important;
        text-align: left !important;
        border-bottom: 1px solid #f1f5f9 !important; /* Linha fininha a separar as secções da loja */
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .has-dropdown.ativo > ul li:last-child a,
    .has-dropdown.ativo .submenu li:last-child a {
        border-bottom: none !important;
    }

    /* ——— CATEGORIAS ——— */
    .categoria-pill__img {
        width: 80px !important;
        height: 80px !important;
    }

    .categoria-pill span {
        font-size: 0.85rem !important;
    }

    .categorias-slider__track {
        gap: 10px !important;
    }
    /* ==========================================================
       ELIMINAR DEFINITIVAMENTE AS SOMBRAS DO SLIDER
       ========================================================== */
    .categorias-slider::before,
    .categorias-slider::after {
        display: none !important; /* Remove o elemento do ecrã */
        content: none !important; /* Limpa qualquer conteúdo residual */
        background: none !important; /* Garante que não há fundo */
    }

    /* ——— PRODUTOS ——— */
    .produtos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .section-produtos .produtos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ——— DESTAQUES E BANNERS ——— */
    .destaque-novo,
    .banner-countdown {
        flex-direction: column !important;
        text-align: center !important;
        min-height: auto !important;
    }

    .destaque-novo-content,
    .banner-countdown__text {
        max-width: 100% !important;
    }

    .destaque-novo-img-wrapper {
        position: relative !important;
        width: 100% !important;
        transform: none !important;
        top: auto !important;
        right: auto !important;
        text-align: center !important;
    }

    .banners-grid {
        grid-template-columns: 1fr !important;
    }

    /* ——— PARCEIROS ——— */
    .parceiros-slider {
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .parceiro-logo {
        flex: 0 0 45% !important;
    }

    /* ——— SECTION TITLES ——— */
    .section-title {
        font-size: 1.3rem !important;
    }

    .section-header__tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }

    /* ——— PRODUTO DETALHE ——— */
    .produto-detalhe__layout {
        grid-template-columns: 1fr !important;
    }

    /* ——— CARRINHO ——— */
    .carrinho-layout {
        grid-template-columns: 1fr !important;
    }

    .carrinho-resumo {
        padding: 16px;
    }

    .resumo-linha {
        font-size: 13px;
    }

    /* ——— CHECKOUT ——— */
    .checkout-layout {
        grid-template-columns: 1fr !important;
    }

    .checkout-section-header {
        padding: 12px 16px;
    }

    /* ——— CONTA ——— */
    .conta-nav {
        margin-top: -40px;
    }

    .conta-nav__item, 
    .conta-nav form {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        margin-bottom: 0 !important;
    }

    /* Força os tamanhos e as alturas que tu pediste */
    .conta-nav__item {
        height: 80px !important;
        font-size: 11px !important;
        padding: 10px !important; /* Reduz o espaço interno para nada ficar cortado */
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Força o ícone a ficar mais pequeno */
    .conta-nav__item i {
        font-size: 24px !important;
        margin-bottom: 6px !important; /* Um espacinho entre o ícone e o texto */
    }

    .conta-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-card i {
        font-size: 32px;
    }

    .stat-card__num {
        font-size: 28px;
    }

    .conta-table th,
    .conta-table td {
        padding: 10px;
        font-size: 12px;
    }

    /* ——— SOBRE ——— */
    .sobre-quem__layout {
        grid-template-columns: 1fr !important;
    }

    .valores-grid {
        grid-template-columns: 1fr !important;
    }

    .missao-grid {
        grid-template-columns: 1fr !important;
    }

    /* ——— CONTACTOS ——— */
    .contactos-layout {
        grid-template-columns: 1fr !important;
    }

    /* ——— NEWSLETTER ——— */
    .newsletter__inner {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 24px !important;
    }

    .newsletter__image {
        display: none !important;
    }

    /* ——— FOOTER ——— */
    .footer__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* ——— FORMS ——— */
    .form-row--2,
    .form-row--3 {
        grid-template-columns: 1fr !important;
    }
    .slider-btn {
        display: none !important;
    }
     /* ==========================================================
       SIDEBAR DE FILTROS COMPACTA (MOBILE)
       ========================================================== */
    .loja-sidebar {
        display: block !important;
        width: 100% !important;
        
        /* O limite mágico: a caixa não passa desta altura */
        max-height: 320px !important; 
        
        /* Ativa o scroll apenas dentro da caixa se os filtros forem longos */
        overflow-y: auto !important; 

        padding: 15px !important;
        margin-bottom: 25px !important; 
        
        /* Sombra leve para destacar dos produtos que vêm abaixo */
        box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.1) !important;
    }

    /* Ajuste extra para a barra de scroll ficar mais fina e elegante no telemóvel */
    .loja-sidebar::-webkit-scrollbar {
        width: 6px !important;
    }
    .loja-sidebar::-webkit-scrollbar-thumb {
        background-color: #cccccc !important;
        border-radius: 10px !important;
    }

    .btn-mobile-filtro {
            display: block !important;
        }

        /* A sidebar arranca totalmente invisível e arrumada */
        .loja-sidebar {
            display: none !important; 
            width: 100% !important;
            padding: 10px 0 !important;
            margin-bottom: 25px !important;
        }

        /* A classe mágica que o JavaScript vai adicionar para mostrar os filtros */
        .loja-sidebar.mostrar-filtros {
            display: block !important;
        }

        /* ==========================================================
       BOTÃO DE FILTROS - COR PRINCIPAL DO TEMA
       ========================================================== */
    .btn-mobile-filtro {
        color: var(--cor-principal) !important;
        border: 1px solid var(--cor-principal) !important;
        background-color: transparent !important; /* Mantém o estilo limpo sem fundo */
    }

    /* Efeito quando o utilizador clica ou passa o dedo */
    .btn-mobile-filtro:hover,
    .btn-mobile-filtro:active,
    .btn-mobile-filtro:focus {
        background-color: var(--cor-principal) !important;
        color: #ffffff !important; 
    }
    
    /* ==========================================================
       CENTRAR INFORMAÇÃO E IMPEDIR CORTE À DIREITA
       ========================================================== */
    .produto-info {
        width: 100% !important;
        max-width: 100% !important; /* Proíbe a caixa de ser maior que o ecrã */
        margin: 0 auto !important; /* Puxa para o centro */
        padding: 0 15px !important; /* Dá uma margem de segurança para não colar aos limites do telemóvel */
        box-sizing: border-box !important; /* <-- A MAGIA: Garante que os tamanhos não atiram a caixa para fora! */
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
    }

    /* ==========================================================
       NOVO LAYOUT DE BOTÕES: Qtd (Quadrado) | COMPRAR (Largo) | Favorito (Quadrado)
       ========================================================== */
    /* A caixa mãe que segura os três botões */
    .produto-info .d-flex {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* Força tudo numa linha horizontal */
        flex-wrap: nowrap !important; /* Proíbe de saltarem para linhas diferentes */
        align-items: center !important;
        justify-content: space-between !important; /* Espalha os botões usando todo o espaço */
        gap: 10px !important;
        box-sizing: border-box !important;
        margin-top: 15px !important;
    }

    /* 1. Caixa de Quantidade: Larga o suficiente para os 3 elementos (+, número, -) */
    .qty-box-custom {
        width: 110px !important; /* Damos espaço suficiente para não esmagar nada */
        min-width: 110px !important;
        height: 45px !important; 
        margin: 0 !important; 
        
        display: flex !important;
        flex-direction: row !important; /* Garante que ficam os 3 lado a lado na horizontal */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Organiza o espaço lá dentro (Botões laterais e Número ao centro) */
    .qty-box-custom button,
    .qty-box-custom .btn {
        width: 35px !important; /* Largura fixa para os botões + e - */
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .qty-box-custom input {
        width: 40px !important; /* Largura para o número 5 */
        height: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }
    /* 2. Botão COMPRAR: Rouba o espaço todo do meio */
    .produto-info .btn-comprar, 
    .produto-info form button[type="submit"] { /* Apanha o botão Comprar independentemente da classe exata */
        flex: 1 !important; /* A MAGIA: Manda o botão esticar para preencher todo o espaço vazio! */
        height: 45px !important; /* Mantém a altura igual à quantidade */
        margin: 0 !important;
        padding: 0 20px !important;
    }

    /* 3. Botão Favoritos: Garante que mantém o tamanho quadrado */
    .produto-info .btn-favorito,
    .produto-info .add-to-wishlist { /* Ajusta a classe se for diferente no teu HTML */
        width: 45px !important;
        min-width: 45px !important;
        height: 45px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ==========================================================
       1. CORRIGIR A SALGANHADA DOS PREÇOS (Garante que os números e o € ficam juntos)
       ========================================================== */
    .produto-info .price,
    .produto-info .price--final,
    .produto-info .price--original {
        display: inline-block !important; /* Mantém o 7.50 e o € juntos! */
        margin-right: 10px !important;
    }

    /* ==========================================================
       2. ORGANIZAR A CAIXA MÃE DOS PREÇOS E DISPONIBILIDADE
       ========================================================== */
    /* Apanha a caixa que envolve os preços para a forçar a organizar-se em coluna */
    .produto-info > div:has(> #js-disponibilidade-container),
    .produto-info .price-wrapper,
    .produto-info .d-flex:has(> .price) { /* Se tiveres alguma destas classes, ele apanha */
        display: flex !important;
        flex-direction: column !important; /* A MAGIA REAL: Força os elementos a empilharem-se de cima para baixo */
        align-items: center !important; /* Centra os preços e a disponibilidade */
        width: 100% !important;
        gap: 10px !important; /* Dá um espacinho entre o preço e o stock */
    }

    /* ==========================================================
       3. A DISPONIBILIDADE (Agora num bloco separado e limpo)
       ========================================================== */
    #js-disponibilidade-container {
        display: block !important;
        width: auto !important; /* Deixa o texto ocupar apenas o espaço que precisa */
        text-align: center !important;
        margin: 5px 0 15px 0 !important; /* Espaço em cima e em baixo */
        flex: none !important; /* Remove aquela ordem maluca de ocupar 100% que partiu os preços */
    }
    .btn.btn-sm.btn-outline-primary.text-white,
    .estado-badge{
        padding: 2px 8px !important; /* Esmaga o enchimento (Cima/Baixo | Lados) */
        font-size: 11px !important;  /* Letra bastante mais pequena */
        line-height: 1.2 !important; /* Aproxima o texto das bordas */
        height: auto !important;     /* Garante que a altura obedece ao novo padding */
        min-height: 0 !important;    /* Mata qualquer altura mínima forçada pelo tema */
    }
    .conta-nav form {
        display: contents !important; 
    }


    /* dqui para baixo*/
   /* ==========================================================
   CONTENTOR LOJA
   ========================================================== */
.loja-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    display: block !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ==========================================================
   CARTÃO — grid de 4 linhas
   ========================================================== */
.produto-list-item {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
        "img  info"
        "ref  ref"
        "price qty"
        "btn  btn" !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-sizing: border-box !important;
}

/* ==========================================================
   IMAGEM — coluna esquerda, linhas 1
   ========================================================== */
.produto-list-item__img,
.produto-list-item__image {
    grid-area: img !important;
    width: 90px !important;
    height: 90px !important;
}

.produto-list-item__img img,
.produto-list-item__image img,
.produto-list-item > a > img,
.produto-list-item > img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 8px !important;
}

/* ==========================================================
   NOME + DESCRIÇÃO — coluna direita, linha 1
   ========================================================== */
.produto-list-item__info,
.produto-list-item__content {
    grid-area: info !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.produto-list-item__name,
.produto-list-item__title {
    grid-area: info !important;  /* fallback se não houver wrapper */
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

.produto-list-item__desc,
.produto-list-item__descricao {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    display: -webkit-box !important;
 
    overflow: hidden !important;
}

/* ==========================================================
   REFERÊNCIA — linha 2, largura total
   ========================================================== */
.produto-list-item__ref,
.produto-list-item__referencia {
    grid-area: ref !important;
    font-size: 11px !important;
    color: var(--cor-principal) !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 0 !important;
}

/* ==========================================================
   PREÇO — linha 3, lado esquerdo
   ========================================================== */
.produto-list-item__price {
    grid-area: price !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    align-self: center !important;
    margin: 0 !important;
    width: auto !important;
    flex: none !important;
}

/* ==========================================================
   QUANTIDADE — linha 3, lado direito
   ========================================================== */
.produto-list-item__qty {
    grid-area: qty !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-self: center !important;
    margin: 0 !important;
    width: auto !important;
    flex: none !important;
}

.qty-input {
    width: 75px !important;
    height: 38px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background: #fdfdfd !important;
}

/* ==========================================================
   BOTÃO COMPRAR — linha 4, largura total
   ========================================================== */
.produto-list-item form {
    grid-area: btn !important;
    width: 100% !important;
    margin: 0 !important;
}

.produto-list-item form button {
    width: 100% !important;
    height: 40px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

}

/* =========================================
   MOBILE PEQUENO — @media (max-width: 480px)
   ========================================= */
/* =========================================
   MOBILE PEQUENO — @media (max-width: 480px)
   ========================================= */
@media (max-width: 480px) {

    :root {
        font-size: 13px;
    }

    .container {
        padding: 0 15px;
    }

    /* ——— HEADER ——— */
    .header__logo img {
        height: 45px;
    }

   .header__actions {
    gap: 12px;
    margin-left: auto !important;
}

.search-box {
    right: 8px !important;
}

    /* ——— HERO ——— */
    .hero__text h1 {
        font-size: 20px;
    }

    /* ——— BUTTONS ——— */
    .btn {
        padding: 10px 20px;
        font-size: 13px;
    }

    .btn--block {
        width: 100%;
    }

    .btn--dark.btn--sm {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* ——— PRODUTOS ——— */
    .produtos-grid--3,
    .produtos-grid--4,
    .produtos-grid {
        grid-template-columns: 1fr !important;
    }

    .produtos-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* ==========================================================
       PRODUTO CARD INFO — GRID: PREÇO + BOTÃO CESTO NA MESMA LINHA
       ========================================================== */
    .produto-card__info {
        padding: 8px 8px 10px !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto auto !important;
        align-items: start !important;
        gap: 0 4px !important;
    }

    /* Preço — coluna 1, linha 1 */
    .produto-card__price {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
    }

    .price--final {
        font-size: 13px !important;
    }

    /* ==========================================================
       CESTO — coluna 2, linha 1 (ao lado do preço)
       ========================================================== */
    .btn.rounded-circle {
        grid-column: 2 !important;
        grid-row: 1 !important;

        /* Anula posicionamento absoluto anterior */
        position: static !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 !important;

        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        align-self: center !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        z-index: 1 !important;
    }

    .btn.rounded-circle i,
    .btn.rounded-circle svg {
        font-size: 12px !important;
    }

    /* ==========================================================
       RATING — mais pequeno, linha 2 (ocupa as 2 colunas)
       ========================================================== */
    .produto-card__rating {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        margin: 3px 0 !important;
    }

    .produto-card__rating i,
    .produto-card__rating svg,
    .produto-card__rating .fa-star,
    .produto-card__rating .star {
        font-size: 7px !important;
    }

    /* ==========================================================
       NOME — truncado numa linha, linha 3 (ocupa as 2 colunas)
       ========================================================== */
    .produto-card__name {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
        line-height: 1.3 !important;
    }

    /* ==========================================================
       IMAGEM DO PRODUTO — overflow volta a hidden (botão já não sai por baixo)
       ========================================================== */
    .card-img-wrapper,
    .produto-imagem-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .card-img-top {
        width: 100% !important;
        height: 100px !important;
        object-fit: contain !important;
        padding: 5px !important;
        display: block !important;
    }

    /* ——— CATEGORIAS ——— */
    .categoria-pill {
        min-width: 80px;
    }

    .categoria-pill__img--box {
        width: 100px;
        height: 100px;
    }

    /* ——— SECTION TITLE ——— */
    .section-title {
        font-size: 20px;
    }

    /* ——— DESTAQUES ——— */
    .destaques-grid {
        gap: 12px;
    }

    .destaque-card {
        padding: 16px;
    }

    .countdown span {
        padding: 4px 7px !important;
        font-size: 11px !important;
    }

/* ==========================================================
       NAVBAR__INNER - DE VOLTA AO ESPAÇAMENTO ORIGINAL
       ========================================================== */
    .navbar__inner {
        display: flex !important;
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        align-items: center !important;
        justify-content: space-between !important; 
        width: 100% !important;
        overflow: visible !important;
        white-space: nowrap !important; 
        padding: 0 !important; 
    }

    /* ==========================================================
       MENU HORIZONTAL - ÂNCORA PARA A CAIXA GIGANTE
       ========================================================== */
    .navbar__menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; 
        justify-content: center !important;
        width: 100% !important;
        overflow: visible !important; 
        position: relative !important;
        gap: 5px !important;
    }

    .navbar__menu li {
        width: auto !important;
        position: static !important;
    }

    /* ==========================================================
       DROPDOWN ATIVO - A CAIXA FLUTUANTE LARGA (Com a funcionalidade)
       ========================================================== */
    .navbar__menu li.ativo > ul,
    .navbar__menu li.ativo > .submenu,
    .navbar__menu li.ativo > .dropdown-menu {
        display: block !important;
        position: absolute !important;
        top: 100% !important; 
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        z-index: 99999 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
        margin-top: 5px !important;
        padding: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }

    /* ==========================================================
       FORÇA O CABEÇALHO PARA A FRENTE DE TUDO (Z-INDEX FIX)
       ========================================================== */
    header, 
    .header, 
    .header__inner {
        position: relative !important;
        z-index: 999999 !important;
    }

    .navbar__menu li {
        width: auto !important;
        position: static !important;
    }

    .navbar__menu li a {
        padding: 10px 8px !important; 
        font-size: 13px !important;
        display: inline-block !important; 
        white-space: nowrap !important;
    }

    /* ==========================================================
       DROPDOWN MOBILE - Caixa Flutuante Larga (Ecrã Todo)
       ========================================================== */
    .has-dropdown > ul,
    .has-dropdown .submenu {
        display: none; 
    }

    .has-dropdown.ativo > ul,
    .has-dropdown.ativo .submenu {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        z-index: 99999 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
        margin-top: 5px !important;
        padding: 0 !important;
        border-radius: 0 0 8px 8px !important;
    }

    .has-dropdown.ativo > ul li,
    .has-dropdown.ativo .submenu li {
        width: 100% !important;
        display: block !important;
    }

    .has-dropdown.ativo > ul li a,
    .has-dropdown.ativo .submenu li a {
        padding: 12px 20px !important;
        text-align: left !important;
        border-bottom: 1px solid #f1f5f9 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .has-dropdown.ativo > ul li:last-child a,
    .has-dropdown.ativo .submenu li:last-child a {
        border-bottom: none !important;
    }

    /* ==========================================================
       CENTRAR INFORMAÇÃO E IMPEDIR CORTE À DIREITA
       ========================================================== */
    .produto-info {
        width: 100% !important;
        max-width: 100% !important; /* Proíbe a caixa de ser maior que o ecrã */
        margin: 0 auto !important; /* Puxa para o centro */
        padding: 0 15px !important; /* Dá uma margem de segurança para não colar aos limites do telemóvel */
        box-sizing: border-box !important; /* <-- A MAGIA: Garante que os tamanhos não atiram a caixa para fora! */
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
    }

    /* ==========================================================
       NOVO LAYOUT DE BOTÕES: Qtd (Quadrado) | COMPRAR (Largo) | Favorito (Quadrado)
       ========================================================== */
    /* A caixa mãe que segura os três botões */
    .produto-info .d-flex {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* Força tudo numa linha horizontal */
        flex-wrap: nowrap !important; /* Proíbe de saltarem para linhas diferentes */
        align-items: center !important;
        justify-content: space-between !important; /* Espalha os botões usando todo o espaço */
        gap: 10px !important;
        box-sizing: border-box !important;
        margin-top: 15px !important;
    }

    /* 1. Caixa de Quantidade: Larga o suficiente para os 3 elementos (+, número, -) */
    .qty-box-custom {
        width: 110px !important; /* Damos espaço suficiente para não esmagar nada */
        min-width: 110px !important;
        height: 45px !important; 
        margin: 0 !important; 
        
        display: flex !important;
        flex-direction: row !important; /* Garante que ficam os 3 lado a lado na horizontal */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Organiza o espaço lá dentro (Botões laterais e Número ao centro) */
    .qty-box-custom button,
    .qty-box-custom .btn {
        width: 35px !important; /* Largura fixa para os botões + e - */
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .qty-box-custom input {
        width: 40px !important; /* Largura para o número 5 */
        height: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }
    /* 2. Botão COMPRAR: Rouba o espaço todo do meio */
    .produto-info .btn-comprar, 
    .produto-info form button[type="submit"] { /* Apanha o botão Comprar independentemente da classe exata */
        flex: 1 !important; /* A MAGIA: Manda o botão esticar para preencher todo o espaço vazio! */
        height: 45px !important; /* Mantém a altura igual à quantidade */
        margin: 0 !important;
        padding: 0 20px !important;
    }

    /* 3. Botão Favoritos: Garante que mantém o tamanho quadrado */
    .produto-info .btn-favorito,
    .produto-info .add-to-wishlist { /* Ajusta a classe se for diferente no teu HTML */
        width: 45px !important;
        min-width: 45px !important;
        height: 45px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ==========================================================
       1. CORRIGIR A SALGANHADA DOS PREÇOS (Garante que os números e o € ficam juntos)
       ========================================================== */
    .produto-info .price,
    .produto-info .price--final,
    .produto-info .price--original {
        display: inline-block !important; /* Mantém o 7.50 e o € juntos! */
        margin-right: 10px !important;
    }

    /* ==========================================================
       2. ORGANIZAR A CAIXA MÃE DOS PREÇOS E DISPONIBILIDADE
       ========================================================== */
    /* Apanha a caixa que envolve os preços para a forçar a organizar-se em coluna */
    .produto-info > div:has(> #js-disponibilidade-container),
    .produto-info .price-wrapper,
    .produto-info .d-flex:has(> .price) { /* Se tiveres alguma destas classes, ele apanha */
        display: flex !important;
        flex-direction: column !important; /* A MAGIA REAL: Força os elementos a empilharem-se de cima para baixo */
        align-items: center !important; /* Centra os preços e a disponibilidade */
        width: 100% !important;
        gap: 10px !important; /* Dá um espacinho entre o preço e o stock */
    }

    /* ==========================================================
       3. A DISPONIBILIDADE (Agora num bloco separado e limpo)
       ========================================================== */
    #js-disponibilidade-container {
        display: block !important;
        width: auto !important; /* Deixa o texto ocupar apenas o espaço que precisa */
        text-align: center !important;
        margin: 5px 0 15px 0 !important; /* Espaço em cima e em baixo */
        flex: none !important; /* Remove aquela ordem maluca de ocupar 100% que partiu os preços */
    }
    /* ——— PRODUTO DETALHE ——— */
    .produto-info__nome {
        font-size: 22px;
    }

    .price-big {
        font-size: 20px;
    }

    /* ——— CARRINHO ——— */
    .carrinho-table {
        font-size: 12px;
        min-width: 550px;
    }

    .carrinho-resumo {
        padding: 16px;
    }

    .resumo-linha {
        font-size: 13px;
    }

    /* ——— CHECKOUT ——— */
    .checkout-section-header {
        padding: 12px 16px;
    }

    /* ——— CONTA ——— */
    .conta-nav {
        margin-top: -40px;
    }

   .conta-nav__item, 
    .conta-nav form {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        margin-bottom: 0 !important;
    }

    .conta-nav__item {
        height: 80px !important;
        font-size: 11px !important;
        padding: 10px !important; 
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .conta-nav__item i {
        font-size: 24px !important;
        margin-bottom: 6px !important; 
    }

    .conta-stats {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-card i {
        font-size: 32px;
    }

    .stat-card__num {
        font-size: 28px;
    }

    .conta-table th,
    .conta-table td {
        padding: 10px;
        font-size: 12px;
    }

    .tabela-ultimos-produtos {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-collapse: collapse !important;
    }

    .tabela-ultimos-produtos thead {
        display: none !important;
    }

    .tabela-ultimos-produtos tbody {
        display: block !important;
        width: 100% !important;
    }

    .tabela-ultimos-produtos tr {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        position: relative !important;
        padding: 16px 16px 16px 90px !important;
        min-height: 100px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background-color: transparent !important;
        box-sizing: border-box !important;
    }

    .tabela-ultimos-produtos tr:last-child {
        border-bottom: none !important;
    }

    .tabela-ultimos-produtos td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .tabela-ultimos-produtos td:nth-child(1) {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 65px !important;
    }

    .tabela-ultimos-produtos td:nth-child(1) img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    .tabela-ultimos-produtos td:nth-child(2) {
        color: #94a3b8 !important;
        font-size: 11px !important;
        text-transform: uppercase !important;
        margin-bottom: 2px !important;
    }

    .tabela-ultimos-produtos td:nth-child(3) {
        color: #1e293b !important;
        font-size: 14px !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
    }

    .tabela-ultimos-produtos td:nth-child(4) {
        color: #64748b !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2 !important; 
        line-clamp: 2 !important;
        overflow: hidden;
    }

    .tabela-ultimos-produtos td:nth-child(5) {
        font-size: 14px !important;
        font-weight: bold !important;
        color: var(--cor-principal, #10b981) !important;
    }

    .tabela-ultimos-produtos td:nth-child(5)::before {
        content: "Qtd: ";
        font-weight: normal !important;
        color: #64748b !important;
    }

  /* ==========================================================================
   TABELA ENCOMENDAS — tabela exterior (linhas de resumo)
   ========================================================================== */
.conta-table.tabela-encomendas {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    min-width: 0 !important;
}

.conta-table.tabela-encomendas > thead          { display: table-header-group !important; }
.conta-table.tabela-encomendas > tbody          { display: table-row-group    !important; }
.conta-table.tabela-encomendas > tbody > tr     { display: table-row          !important; }

.conta-table.tabela-encomendas > thead > tr > th,
.conta-table.tabela-encomendas > tbody > tr > td {
    display: table-cell !important;
    padding: 8px 2px !important;
    font-size: 9px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    text-align: center !important;
    border: none !important;
    border-bottom: none !important;
}

.conta-table.tabela-encomendas > thead > tr > th:nth-child(1),
.conta-table.tabela-encomendas > tbody > tr > td:nth-child(1) {
    width: 28% !important;
    text-align: left !important;
    padding-left: 8px !important;
    font-weight: bold !important;
}
.conta-table.tabela-encomendas > thead > tr > th:nth-child(2),
.conta-table.tabela-encomendas > tbody > tr > td:nth-child(2) { width: 22% !important; }

.conta-table.tabela-encomendas > thead > tr > th:nth-child(3),
.conta-table.tabela-encomendas > tbody > tr > td:nth-child(3) { width: 20% !important; }

.conta-table.tabela-encomendas > thead > tr > th:nth-child(4),
.conta-table.tabela-encomendas > tbody > tr > td:nth-child(4) { width: 8% !important; }

.conta-table.tabela-encomendas > thead > tr > th:nth-child(5),
.conta-table.tabela-encomendas > tbody > tr > td:nth-child(5) {
    width: 18% !important;
    text-align: right !important;
    padding-right: 8px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    font-weight: bold !important;
}

.conta-table.tabela-encomendas > thead > tr > th:nth-child(6) {
    font-size: 0 !important;
    color: transparent !important;
    width: 4% !important;
}
.conta-table.tabela-encomendas > tbody > tr > td:nth-child(6) {
    width: 4% !important;
    text-align: center !important;
}

/* ==========================================================================
   TABELA PRODUTOS — tabela interior (linha expandida)
   ========================================================================== */
.conta-table.tabela-encomendas table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    min-width: 0 !important;
}

.conta-table.tabela-encomendas table thead { display: table-header-group !important; }
.conta-table.tabela-encomendas table tbody { display: table-row-group    !important; }
.conta-table.tabela-encomendas table tr    { display: table-row          !important; }

.conta-table.tabela-encomendas table th,
.conta-table.tabela-encomendas table td {
    display: table-cell !important;
    padding: 6px 4px !important;
    font-size: 9px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: left !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.conta-table.tabela-encomendas table th:nth-child(1),
.conta-table.tabela-encomendas table td:nth-child(1) { display: none !important; }

.conta-table.tabela-encomendas table th:nth-child(2),
.conta-table.tabela-encomendas table td:nth-child(2) { width: 30% !important; }

.conta-table.tabela-encomendas table th:nth-child(3),
.conta-table.tabela-encomendas table td:nth-child(3) { width: 26% !important; }

.conta-table.tabela-encomendas table th:nth-child(4),
.conta-table.tabela-encomendas table td:nth-child(4) {
    width: 10% !important;
    text-align: center !important;
}

.conta-table.tabela-encomendas table th:nth-child(5),
.conta-table.tabela-encomendas table td:nth-child(5) {
    width: 17% !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.conta-table.tabela-encomendas table th:nth-child(6),
.conta-table.tabela-encomendas table td:nth-child(6) {
    width: 17% !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-weight: bold !important;
    padding-right: 6px !important;
}

.tabela-encomendas img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

    /* ——— VALORES E MISSÃO ——— */
    .valor-card {
        padding: 20px 12px;
    }

    .valor-card__icon {
        font-size: 36px;
    }

    .valor-card h3 {
        font-size: 16px;
    }

    /* ——— FOOTER ——— */
    .footer__grid {
        gap: 20px;
    }

    /* ——— NEWSLETTER ——— */
    .newsletter {
        margin: 24px 15px;
    }

    .newsletter__inner {
        padding: 24px 16px;
    }

    .newsletter__text h2 {
        font-size: 22px;
    }

    /* ——— PARCEIROS ——— */
    .parceiro-logo {
        flex: 0 0 100% !important;
    }

    /* ——— FORMS ——— */
    .form-control {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* ——— AUTH ——— */
    .auth-card {
        padding: 28px 20px;
    }

    .auth-card__header h2 {
        font-size: 18px;
    }

    /* ——— PAGINAÇÃO ——— */
    .pagination-wrapper span,
    .pagination-wrapper a {
        padding: 6px 10px;
        font-size: 12px;
    }

   /* ==========================================================
       SIDEBAR DE FILTROS COMPACTA (MOBILE)
       ========================================================== */
    .loja-sidebar {
        display: block !important;
        width: 100% !important;
        
        /* O limite mágico: a caixa não passa desta altura */
        max-height: 320px !important; 
        
        /* Ativa o scroll apenas dentro da caixa se os filtros forem longos */
        overflow-y: auto !important; 

        padding: 15px !important;
        margin-bottom: 25px !important; 
        
        /* Sombra leve para destacar dos produtos que vêm abaixo */
        box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.1) !important;
    }

    /* Ajuste extra para a barra de scroll ficar mais fina e elegante no telemóvel */
    .loja-sidebar::-webkit-scrollbar {
        width: 6px !important;
    }
    .loja-sidebar::-webkit-scrollbar-thumb {
        background-color: #cccccc !important;
        border-radius: 10px !important;
    }
@media (max-width: 1024px) {
    .promocoes-slider-item { width: calc(33.33% - 16px); } /* 3 */
}

@media (max-width: 768px) {
    .promocoes-slider-item { width: calc(50% - 12px); } /* 2 */
}

@media (max-width: 480px) {
    .promocoes-slider-item { width: calc(100% - 0px); } /* 1 */
}
    .btn-mobile-filtro {
            display: block !important;
        }

        /* A sidebar arranca totalmente invisível e arrumada */
        .loja-sidebar {
            display: none !important; 
            width: 100% !important;
            padding: 10px 0 !important;
            margin-bottom: 25px !important;
        }

        /* A classe mágica que o JavaScript vai adicionar para mostrar os filtros */
        .loja-sidebar.mostrar-filtros {
            display: block !important;
        }

        /* ==========================================================
       BOTÃO DE FILTROS - COR PRINCIPAL DO TEMA
       ========================================================== */
    .btn-mobile-filtro {
        color: var(--cor-principal) !important;
        border: 1px solid var(--cor-principal) !important;
        background-color: transparent !important; /* Mantém o estilo limpo sem fundo */
    }

    /* Efeito quando o utilizador clica ou passa o dedo */
    .btn-mobile-filtro:hover,
    .btn-mobile-filtro:active,
    .btn-mobile-filtro:focus {
        background-color: var(--cor-principal) !important;
        color: #ffffff !important; 
    }
    /* ==========================================================
       BOTÃO EXTRA PEQUENO (Sobrescrita do btn-sm do Bootstrap)
       ========================================================== */
    .btn.btn-sm.btn-outline-primary.text-white,
    .estado-badge{
        padding: 2px 8px !important; /* Esmaga o enchimento (Cima/Baixo | Lados) */
        font-size: 11px !important;  /* Letra bastante mais pequena */
        line-height: 1.2 !important; /* Aproxima o texto das bordas */
        height: auto !important;     /* Garante que a altura obedece ao novo padding */
        min-height: 0 !important;    /* Mata qualquer altura mínima forçada pelo tema */
    }

    /* ==========================================================
       IGNORAR O FORM DO LARAVEL NO LAYOUT
       ========================================================== */
    .conta-nav form {
        display: contents !important; 
    }
 /* ==========================================================
       ELIMINAR DEFINITIVAMENTE AS SOMBRAS DO SLIDER
       ========================================================== */
    .categorias-slider::before,
    .categorias-slider::after {
        display: none !important; /* Remove o elemento do ecrã */
        content: none !important; /* Limpa qualquer conteúdo residual */
        background: none !important; /* Garante que não há fundo */
    }

}

/* =========================================
   EXTRA PEQUENO — @media (max-width: 360px)
   ========================================= */
@media (max-width: 360px) {
    .section-title {
        font-size: 18px;
    }
.slider-btn {
        display: none !important;
    }
    .btn {
        padding: 8px 16px;
    }

    .conta-nav__item {
        width: 70px;
        height: 70px;
        font-size: 10px;
    }

    .stat-card__num {
        font-size: 24px;
    }

    .carrinho-table {
        min-width: 500px;
        font-size: 11px;
    }

    .badge-stock {
        font-size: 13px;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background-color: #f8f9fa;
        border: 1px solid #e9ecef;
    }
    
    /* ==========================================================
       CENTRAR INFORMAÇÃO E IMPEDIR CORTE À DIREITA
       ========================================================== */
    .produto-info {
        width: 100% !important;
        max-width: 100% !important; /* Proíbe a caixa de ser maior que o ecrã */
        margin: 0 auto !important; /* Puxa para o centro */
        padding: 0 15px !important; /* Dá uma margem de segurança para não colar aos limites do telemóvel */
        box-sizing: border-box !important; /* <-- A MAGIA: Garante que os tamanhos não atiram a caixa para fora! */
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
    }

    /* ==========================================================
       NOVO LAYOUT DE BOTÕES: Qtd (Quadrado) | COMPRAR (Largo) | Favorito (Quadrado)
       ========================================================== */
    /* A caixa mãe que segura os três botões */
    .produto-info .d-flex {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* Força tudo numa linha horizontal */
        flex-wrap: nowrap !important; /* Proíbe de saltarem para linhas diferentes */
        align-items: center !important;
        justify-content: space-between !important; /* Espalha os botões usando todo o espaço */
        gap: 10px !important;
        box-sizing: border-box !important;
        margin-top: 15px !important;
    }

    /* 1. Caixa de Quantidade: Larga o suficiente para os 3 elementos (+, número, -) */
    .qty-box-custom {
        width: 110px !important; /* Damos espaço suficiente para não esmagar nada */
        min-width: 110px !important;
        height: 45px !important; 
        margin: 0 !important; 
        
        display: flex !important;
        flex-direction: row !important; /* Garante que ficam os 3 lado a lado na horizontal */
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Organiza o espaço lá dentro (Botões laterais e Número ao centro) */
    .qty-box-custom button,
    .qty-box-custom .btn {
        width: 35px !important; /* Largura fixa para os botões + e - */
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .qty-box-custom input {
        width: 40px !important; /* Largura para o número 5 */
        height: 100% !important;
        text-align: center !important;
        padding: 0 !important;
    }
    /* 2. Botão COMPRAR: Rouba o espaço todo do meio */
    .produto-info .btn-comprar, 
    .produto-info form button[type="submit"] { /* Apanha o botão Comprar independentemente da classe exata */
        flex: 1 !important; /* A MAGIA: Manda o botão esticar para preencher todo o espaço vazio! */
        height: 45px !important; /* Mantém a altura igual à quantidade */
        margin: 0 !important;
        padding: 0 20px !important;
    }

    /* 3. Botão Favoritos: Garante que mantém o tamanho quadrado */
    .produto-info .btn-favorito,
    .produto-info .add-to-wishlist { /* Ajusta a classe se for diferente no teu HTML */
        width: 45px !important;
        min-width: 45px !important;
        height: 45px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ==========================================================
       1. CORRIGIR A SALGANHADA DOS PREÇOS (Garante que os números e o € ficam juntos)
       ========================================================== */
    .produto-info .price,
    .produto-info .price--final,
    .produto-info .price--original {
        display: inline-block !important; /* Mantém o 7.50 e o € juntos! */
        margin-right: 10px !important;
    }

    /* ==========================================================
       2. ORGANIZAR A CAIXA MÃE DOS PREÇOS E DISPONIBILIDADE
       ========================================================== */
    /* Apanha a caixa que envolve os preços para a forçar a organizar-se em coluna */
    .produto-info > div:has(> #js-disponibilidade-container),
    .produto-info .price-wrapper,
    .produto-info .d-flex:has(> .price) { /* Se tiveres alguma destas classes, ele apanha */
        display: flex !important;
        flex-direction: column !important; /* A MAGIA REAL: Força os elementos a empilharem-se de cima para baixo */
        align-items: center !important; /* Centra os preços e a disponibilidade */
        width: 100% !important;
        gap: 10px !important; /* Dá um espacinho entre o preço e o stock */
    }

    /* ==========================================================
       3. A DISPONIBILIDADE (Agora num bloco separado e limpo)
       ========================================================== */
    #js-disponibilidade-container {
        display: block !important;
        width: auto !important; /* Deixa o texto ocupar apenas o espaço que precisa */
        text-align: center !important;
        margin: 5px 0 15px 0 !important; /* Espaço em cima e em baixo */
        flex: none !important; /* Remove aquela ordem maluca de ocupar 100% que partiu os preços */
    }
    .btn.btn-sm.btn-outline-primary.text-white,
    .estado-badge{
        padding: 2px 8px !important; /* Esmaga o enchimento (Cima/Baixo | Lados) */
        font-size: 11px !important;  /* Letra bastante mais pequena */
        line-height: 1.2 !important; /* Aproxima o texto das bordas */
        height: auto !important;     /* Garante que a altura obedece ao novo padding */
        min-height: 0 !important;    /* Mata qualquer altura mínima forçada pelo tema */
    }
    .conta-nav form {
        display: contents !important; 
    }
    /* ==========================================================
       ELIMINAR DEFINITIVAMENTE AS SOMBRAS DO SLIDER
       ========================================================== */
    .categorias-slider::before,
    .categorias-slider::after {
        display: none !important; /* Remove o elemento do ecrã */
        content: none !important; /* Limpa qualquer conteúdo residual */
        background: none !important; /* Garante que não há fundo */
    }
}