/* Base Styles */
:root {
    --color-black: #000;
    --color-white: #fff;
    --color-orange: #f97316;
    --color-orange-dark: #ea580c;
    --color-zinc-950: #09090b;
    --color-zinc-900: #18181b;
    --color-zinc-800: #27272a;
    --color-zinc-700: #3f3f46;
    --color-zinc-500: #71717a;
    --color-zinc-400: #a1a1aa;
    --color-zinc-300: #d4d4d8;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-green-500: #f97316; /* Ajustar se for verde mesmo */
    --color-green-600: #ea580c; /* Ajustar se for verde mesmo */
    --color-yellow-400: #facc15;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--color-black);
    color: var(--color-white);
    line-height: 1.5;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Evita espaços extras abaixo da imagem */
}

.highlight,
.text-orange {
    color: var(--color-orange);
}

.section-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

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

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 1rem;
}

.btn i {
    margin-left: 0.5rem;
}

.btn-primary {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: var(--color-orange-dark);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-zinc-700);
    color: var(--color-white);
}

.btn-outline:hover {
    background-color: var(--color-zinc-900);
}

.btn-dark {
    background-color: var(--color-black);
    color: var(--color-white);
}

.btn-dark:hover {
    background-color: var(--color-zinc-900);
}

/* Header */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    border-bottom: 1px solid var(--color-zinc-800);
    background-color: var(--color-orange); /* Fundo laranja */
    padding: 0; /* Removido padding vertical */
    color: white;
    /* backdrop-filter: blur(10px); */ /* Pode causar problemas de performance */
}

.header .container {
    display: flex;
    height: 3.5rem; /* Altura mobile padrão */
    align-items: center;
    justify-content: space-between;
    padding: 0 0.5rem; /* Padding horizontal mobile */
    gap: 0.5rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem; /* Ajustado para mobile */
    font-weight: 700;
    text-decoration: none;
    color: var(--color-white); /* Garante cor do logo */
}

.logo-img {
    height: 80px; /* Tamanho mobile */
    width: auto;
    max-width: none; /* Permitir que a altura controle */
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative; /* Contexto para a busca absoluta */
}

/* Mobile Menu Button */
.mobile-menu-btn {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 5px; /* Área de clique */
    position: relative; /* Para z-index */
    width: 34px; /* Ajuste para conter o ícone */
    height: 34px; /* Ajuste para conter o ícone */
    display: flex; /* Alterado para flex para centralizar */
    align-items: center;
    justify-content: center;
    order: -1; /* Coloca antes da logo no flex container .header-left */
    z-index: 105; /* Acima do menu */
}

.menu-icon {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative; /* Contexto para pseudo-elementos */
}

.menu-icon::before,
.menu-icon::after,
.menu-icon div {
    content: '';
    background-color: white;
    height: 3px; /* Espessura das linhas */
    border-radius: 2px;
    width: 100%;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
    position: absolute; /* Necessário para animação de transformação */
    left: 0;
}

.menu-icon::before {
    top: 0;
}

.menu-icon div {
    top: 50%;
    transform: translateY(-50%); /* Centraliza a linha do meio */
}

.menu-icon::after {
    bottom: 0;
}

/* Animação do botão sanduíche para 'X' */
.mobile-menu-btn.active .menu-icon::before {
    transform: translateY(7.5px) rotate(45deg); /* Move e rotaciona */
    top: 50%; /* Alinha ao centro para rotação */
    margin-top: -1.5px; /* Ajuste fino vertical (metade da altura da linha) */
}

.mobile-menu-btn.active .menu-icon div {
    opacity: 0; /* Esconde a linha do meio */
}

.mobile-menu-btn.active .menu-icon::after {
    transform: translateY(-7.5px) rotate(-45deg); /* Move e rotaciona */
    bottom: 50%; /* Alinha ao centro para rotação */
    margin-bottom: -1.5px; /* Ajuste fino vertical */
}

/* Subheader / Navigation */
.subheader {
    background-color: var(--color-zinc-900);
    border-bottom: 1px solid var(--color-zinc-800);
    /* padding: 10px 0; */ /* Removido padding */
    /* position: sticky; */ /* Removido sticky para controle JS/CSS mobile */
    /* top: 4rem; */ /* Altura do header desktop */
    z-index: 40;
}

.subheader .container {
    display: flex;
    justify-content: center; /* Centraliza no desktop */
    padding: 0 1rem; /* Padding padrão */
}

.subheader-nav {
    width: 100%;
}

.menu-list {
    display: flex;
    gap: 1.5rem;
    justify-content: center; /* Centraliza itens no desktop */
}

.menu-item {
    list-style: none;
}

.nav-link {
    font-size: 1.125rem;
    font-weight: 600;
    transition: color 0.2s ease;
    display: block; /* Garante que o link ocupe espaço */
    padding: 0.75rem 0; /* Padding vertical nos links desktop */
}

.nav-link:hover {
    color: var(--color-orange);
}

/* Desktop Submenu (se houver) */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-zinc-900);
    border-radius: 0.375rem;
    padding: 0.5rem 0;
    min-width: 150px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 41;
}

.menu-item {
    position: relative; /* Contexto para submenu */
}

.menu-item:hover .submenu {
    display: block;
}

.submenu li {
    padding: 0;
}

.submenu .nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem; /* Padding nos links do submenu */
}

/* Search Styles */
.search-wrapper {
    position: static; /* Alterado para estático no fluxo normal */
    display: flex;
    align-items: center;
}

.search-icon-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    z-index: 10; /* Acima do input container quando fechado */
    outline: none;
}

.search-icon-btn:focus {
    outline: none;
    box-shadow: none;
}

.search-icon-btn i {
    display: block; /* Evita problemas de alinhamento */
}

.search-input-container {
    position: absolute;
    right: 35px; /* Espaço para o botão (ajustar conforme tamanho do botão) */
    top: 50%;    
    transform: translateY(-50%);
    height: calc(130% - 10px); /* Altura um pouco menor que o header */
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: width 0.8s ease, opacity 0.8s ease, visibility 0.8s ease;
    background-color: var(--color-zinc-900);
    border-radius: 20px;
    border: 1px solid transparent; /* Borda inicial transparente */
    padding: 0;
    z-index: 5; /* Abaixo do botão quando fechado */
}

.search-input-container.active {
    width: calc(100vw - 150px); /* Largura dinâmica: viewport - logo - botão menu - paddings/gaps */
    max-width: 200px; /* Limite máximo no mobile */
    opacity: 1;
    visibility: visible;
    border: 1px solid var(--color-zinc-700); /* Borda visível quando ativo */
    padding: 0 8px; /* Padding interno */
}

.search-input-animated {
    width: 100%;
    height: 100%; /* Ocupa altura do container */
    background: transparent;
    border: none;
    color: white;
    padding: 0 8px; /* Padding interno do input */
    font-size: 0.9rem;
    outline: none;
}

/* Remover decorações padrão de search input */
.search-input-animated::-webkit-search-decoration,
.search-input-animated::-webkit-search-cancel-button,
.search-input-animated::-webkit-search-results-button,
.search-input-animated::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.search-input-animated::-ms-clear,
.search-input-animated::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* Main Content */
.main {
    padding: 1.5rem 0;
}

/* Launch Banner */
.launch-banner {
    background-color: var(--color-orange);
    color: var(--color-white);
    text-align: center;
    padding: 1rem; /* Reduzido padding */
    margin: 1rem auto;
    font-size: 1rem; /* Reduzido tamanho fonte */
    font-weight: bold;
    border-radius: 0.375rem;
    animation: pulse 2s infinite;
    width: 100%; /* Aumentado width */
    max-width: 600px; /* Reduzido max-width */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
                0 0 15px rgba(255, 255, 255, 0.4); /* Suavizado shadow */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Products Section */
.products-section {
    padding: 2rem 0;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna por padrão (mobile) */
    gap: 1.5rem;
    margin-top: 2rem;
}

.product-card-offer {
    background-color: var(--color-zinc-900);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--color-zinc-800);
    width: 100%; /* Ocupa a coluna */
    max-width: 350px; /* Limite máximo no mobile */
    margin: 0 auto; /* Centraliza se a coluna for mais larga */
}

.product-card-offer:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.product-image-container-offer {
    background-color: var(--color-white);
    padding: 1rem;
    text-align: center;
    aspect-ratio: 1 / 1; /* Mantém proporção quadrada */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Ocupa a largura do card */
    height: auto; /* Altura automática baseada no aspect-ratio */
    overflow: hidden;
}

.product-image-offer {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-content-offer {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa espaço restante */
    position: relative; /* Para o badge */
    min-height: 160px; /* Altura mínima para conteúdo */
    justify-content: space-between; /* Empurra botão para baixo */
}

.product-title-offer {
    font-size: 1rem; /* Tamanho padrão */
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-white);
    line-height: 1.3;
    /* padding-right: 60px; */ /* Removido - espaço para o badge agora é absoluto */
}

.product-store-offer {
    font-size: 0.8rem;
    color: var(--color-zinc-400);
    margin-bottom: 1rem; /* Espaço antes do botão */
}

.view-offer-btn {
    display: block; /* Ocupa largura total */
    width: 100%;
    text-align: center;
    margin-top: auto; /* Garante que fique no final */
    padding: 0.75rem 1rem; /* Padding padrão do botão */
}

.product-origin-shopee {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.product-origin-mercado-livre {
    background-color: var(--color-yellow-400);
    color: var(--color-zinc-900);
}

/* Footer */
.footer {
    background-color: var(--color-zinc-950);
    border-top: 1px solid var(--color-zinc-900);
    padding: 2rem 0 1rem 0; /* Ajustado padding inferior */
    margin-top: 3rem; /* Aumentado espaço superior */
    text-align: center;
}

.footer-grid {
    display: grid; /* Usando grid para melhor controle futuro */
    grid-template-columns: 1fr; /* Uma coluna por padrão */
    gap: 1.5rem;
    margin-bottom: 2rem;
    place-items: center; /* Centraliza o conteúdo da coluna */
}

.footer-column {
    max-width: 400px; /* Limita largura do texto */
    text-align: center; /* Centraliza o texto */
}

.logo-power { /* Estilo para o texto do logo no footer */
    color: var(--color-orange);
    text-align: center;
    display: block; /* Garante que seja um bloco */
    margin-bottom: 0.5rem; /* Espaço abaixo */
    font-size: 1.8rem; /* Aumentado para maior visibilidade */
    font-weight: 700;
}

.footer-description {
    color: var(--color-zinc-400);
    margin: 0.5rem 0 1rem 0; /* Ajustado margin */
    font-size: 1.1rem; /* Aumentado para maior legibilidade */
}

.social-links {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem; /* Espaço acima dos links sociais */
}

.social-link {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--color-zinc-900);
    border-radius: 50%; /* Círculo perfeito */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    color: var(--color-zinc-300); /* Cor do ícone */
}

.social-link:hover {
    background-color: var(--color-orange);
    color: var(--color-white); /* Cor do ícone no hover */
}

.social-link i {
    font-size: 1.3rem; /* Aumentado para maior visibilidade */
}

.footer-title { /* Para futuras seções no footer */
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.footer-links ul { /* Para futuras seções no footer */
    padding: 0; /* Reset padding */
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--color-zinc-400);
    transition: color 0.2s ease;
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--color-orange);
}

.contact-info li { /* Para futuras seções no footer */
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-zinc-400);
    font-size: 0.9rem;
    text-align: left; /* Alinha texto à esquerda */
}

.contact-info i {
    color: var(--color-orange);
    margin-top: 0.25rem;
    width: 16px; /* Largura fixa para alinhamento */
    text-align: center;
}

.copyright {
    text-align: center;
    color: var(--color-zinc-500);
    font-size: 1rem; /* Aumentado para maior legibilidade */
    padding-top: 2rem;
    border-top: 1px solid var(--color-zinc-900);
    margin-top: 1rem; /* Reduzido margin-top */
}

/* WhatsApp Button */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 55px; /* Reduzido */
    height: 55px; /* Reduzido */
    border-radius: 50%;
    background-color: #25D366;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
    color: white; /* Cor do ícone via currentColor */
}

.whatsapp-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.whatsapp-icon {
    width: 30px; /* Reduzido */
    height: 30px; /* Reduzido */
    fill: currentColor; /* Usa a cor do elemento pai (.whatsapp-button) */
}

.whatsapp-tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 110%; /* Posiciona acima do botão */
    left: -50%;
    transform: translateX(-50%); /* Centraliza o tooltip */
    background-color: rgba(0, 0, 0, 0.8); /* Fundo semi-transparente */
    color: white;
    padding: 6px 10px; /* Padding ajustado */
    border-radius: 6px; /* Bordas arredondadas */
    font-size: 13px; /* Tamanho da fonte */
    font-family: sans-serif; /* Fonte simples */
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    white-space: nowrap;
    pointer-events: none; /* Não interfere com o clique */
}

.whatsapp-button:hover .whatsapp-tooltip {
    visibility: visible;
    opacity: 1;
}

/* --- Media Queries --- */

/* Medium screens (Tablets) */
@media (min-width: 768px) {
    .header .container {
        height: 4rem; /* Altura desktop */
        padding: 0 1rem; /* Padding desktop */
    }
    .logo-img {
        height: 100px; /* Logo maior */
    }
    .mobile-menu-btn {
        display: none; /* Esconde botão sanduíche */
    }

    .subheader {
        position: sticky; /* Volta a ser sticky */
        top: 4rem; /* Abaixo do header desktop */
        padding: 0; /* Reset padding */
    }

    .subheader-nav {
        display: block; /* Sempre visível no desktop */
        position: static; /* Volta ao fluxo normal */
        background-color: transparent; /* Fundo do subheader */
        padding: 0;
        box-shadow: none;
        max-height: none;
        overflow-y: visible;
    }

    .menu-list {
        flex-direction: row; /* Linha no desktop */
        gap: 1.5rem;
        text-align: left; /* Alinhamento padrão */
        padding: 0; /* Reset padding */
    }
    .nav-link {
        padding: 0.75rem 0; /* Padding original desktop */
    }

    .search-input-container.active {
        width: 300px; /* Largura fixa maior para desktop */
        max-width: none;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    }
    .product-card-offer {
        max-width: none; /* Remove max-width */
    }

    .footer-grid {
        /* grid-template-columns: repeat(3, 1fr); */ /* Exemplo: 3 colunas no footer desktop */
        /* Ajuste conforme o layout desejado */
        gap: 2rem;
    }

    .whatsapp-tooltip {
        visibility: hidden;
        position: absolute;
        bottom: 110%; /* Posiciona acima do botão */
        left: -50%;
        transform: translateX(-50%); /* Centraliza o tooltip */
        background-color: rgba(0, 0, 0, 0.8); /* Fundo semi-transparente */
        color: white;
        padding: 6px 10px; /* Padding ajustado */
        border-radius: 6px; /* Bordas arredondadas */
        font-size: 13px; /* Tamanho da fonte */
        font-family: sans-serif; /* Fonte simples */
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        white-space: nowrap;
        pointer-events: none; /* Não interfere com o clique */
    }
    
    .whatsapp-button:hover .whatsapp-tooltip {
        visibility: visible;
        opacity: 1;
    }
}

/* Large screens (Desktops) */
@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    }
    .search-input-container.active {
        width: 1040px; /* Ainda maior em telas largas */
    }
}

/* Extra Large screens */
@media (min-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 colunas */
    }
}

/* Mobile Specific Adjustments (max-width: 767px) */
@media (max-width: 767px) {
    .subheader {
        display: none; /* Esconde o subheader inteiro por padrão */
        position: fixed;
        top: 3.5rem; /* Abaixo do header mobile */
        left: 0;
        width: 100%;
        background-color: var(--color-zinc-800); /* Fundo mais escuro */
        z-index: 45; /* Abaixo do header mas acima do conteúdo */
        border-bottom: 1px solid var(--color-zinc-800);
    }
    .subheader.active {
        display: block; /* Mostra o container quando ativo */
    }

    /* Ajustes no NAV dentro do subheader mobile */
    .subheader-nav {
        /* display: none; */ /* Controlado pelo .subheader.active */
        position: static; /* Relativo ao .subheader */
        width: 100%;
        background-color: transparent; /* Herda do .subheader */
        padding: 1rem;
        box-shadow: none; /* Sem sombra própria */
        max-height: calc(100vh - 3.5rem); /* Altura máxima */
        overflow-y: auto; /* Scroll se necessário */
        z-index: 46; /* Acima do .subheader se precisar */
    }

    /* O JS adiciona/remove a classe 'active' no .subheader */
    /* Não precisa de .subheader-nav.active */

    .menu-list {
        flex-direction: column;
        gap: 0.5rem; /* Espaçamento menor */
        align-items: center; /* Centraliza links */
    }

    .menu-item {
        width: 100%; /* Ocupa toda a largura */
        text-align: center;
    }

    .nav-link {
        padding: 0.75rem 1rem; /* Padding nos links mobile */
        font-size: 1.1rem; /* Fonte um pouco maior no menu mobile */
        border-bottom: 1px solid var(--color-zinc-500); /* Divisor */
    }
    .menu-item:last-child .nav-link {
        border-bottom: none; /* Remove borda do último item */
    }

    /* Refinamentos Mobile Adicionais */
    .section-title {
        font-size: 1.6rem; /* Título de seção menor */
    }
    .main {
        padding-top: 1rem; /* Menos padding no topo */
    }

    .product-content-offer {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        /* position: relative; */ /* Não mais necessário para o badge */
        min-height: 160px;
        /* justify-content: space-between; */ /* Remover ou ajustar se necessário */
        /* O conteúdo agora flui naturalmente, o botão será empurrado para baixo */
    }

    .product-title-offer {
        /* Estilos existentes */
        margin-bottom: 0.5rem; /* Espaço abaixo do título */
        order: 1; /* Ordem visual no flex container (opcional, mas bom para clareza) */
    }

    .product-store-offer {
        /* Estilos existentes */
        margin-bottom: 1rem; /* Espaço abaixo da loja (se existir) */
        order: 2; /* Ordem visual */
    }

    /* Estilos do Badge para Mobile */
    .product-origin-badge {
        position: static; /* Tira do posicionamento absoluto */
        display: block; /* Faz ocupar a largura disponível */
        width: fit-content; /* Largura baseada no conteúdo */
        margin: 0.75rem auto; /* Centraliza e adiciona espaço vertical */
        /* Alternativa: margin: 0.75rem 0; para alinhar à esquerda */
        padding: 0.3rem 0.8rem; /* Padding interno ajustado */
        font-size: 0.8rem; /* Tamanho da fonte */
        text-align: center;
        order: 3; /* Ordem visual (depois do título/loja) */

        /* Remove posicionamento absoluto específico de mobile se houver */
        top: auto;
        right: auto;
    }

    /* As cores de fundo específicas (.product-origin-shopee, .product-origin-mercado-livre) */
    /* já devem funcionar, pois são aplicadas ao mesmo elemento. */

    .view-offer-btn {
        /* Estilos existentes */
        margin-top: auto; /* Empurra o botão para o fim do card se houver espaço extra */
        order: 4; /* Garante que seja o último item */
    }

    /* ... restante dos estilos mobile ... */
} /* Fim do @media (max-width: 767px) */

/* Estilos Gerais (Desktop) - Garanta que o badge volte a ser absoluto fora do mobile */
.product-origin-badge {
    /* Estilos gerais que já existiam */
    display: inline-block;
    padding: 0.1rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.25rem;
    position: absolute; /* Posição absoluta POR PADRÃO (desktop) */
    top: 3.5rem;
    right: 1rem;
    text-transform: uppercase;
    z-index: 2;
}