/* ==========================================================================
   ARQUITETURA CSS BOOLEANA (COMPONENTES E UTILITÁRIOS)
==========================================================================
*/

/* 1. SETUP GLOBAL: Variáveis e Estilos Base
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Playfair+Display:wght@700;800&display=swap');

:root {
    --cor-primaria: #D90368;
    --cor-secundaria: #2E294E;
    --cor-destaque: #FFD400;
    --cor-sucesso: #28a745;
    --cor-fundo: #FFFFFF;
    --cor-fundo-suave: #f8f9fa;
    --cor-texto: #333333;
    --cor-texto-claro: #FFFFFF;
    --cor-bordas: #EAEAEA;
    --sombra-padrao: 0 4px 12px rgba(0,0,0,0.05);
    --sombra-grande: 0 10px 20px rgba(46, 41, 78, 0.1);
    
    --fonte-principal: 'Montserrat', sans-serif;
    --fonte-titulos: 'Playfair Display', serif;
}

body {
    font-family: var(--fonte-principal);
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
}

h1, h2, h3, h4, .titulo {
    font-family: var(--fonte-titulos);
    color: var(--cor-secundaria);
}

/* 2. ARQUITETURA DE CLASSES UTILITÁRIAS (Booleanas)
-------------------------------------------------------------------------- */
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-text-upper { text-transform: uppercase !important; }
.u-font-bold { font-weight: 700 !important; }
.u-shadow { box-shadow: var(--sombra-padrao) !important; }
.u-shadow-lg { box-shadow: var(--sombra-grande) !important; }
.u-padding { padding: 20px !important; }
.u-padding-grande { padding: 40px !important; }
.u-margin-v-grande { margin-top: 40px !important; margin-bottom: 40px !important; }
.u-hide-mobile { display: none !important; }
@media (min-width: 768px) {
    .u-hide-desktop { display: none !important; }
    .u-hide-mobile { display: block !important; }
}

/* 3. ARQUITETURA DE COMPONENTES (Base + Modificadores Booleanos)
-------------------------------------------------------------------------- */

/* Componente: Botão */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn--primario {
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
    border-color: var(--cor-primaria);
}
.btn--primario:hover {
    background-color: #B80257;
    border-color: #B80257;
    transform: scale(1.05);
}
.btn--destaque {
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);
    border-color: var(--cor-destaque);
}
.btn--destaque:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-destaque);
    transform: scale(1.05);
}

/* Componente: Card de Produto */
.card {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-bordas);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: var(--sombra-padrao);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-grande);
}
.card__titulo {
    font-family: var(--fonte-principal);
    font-weight: 500;
    font-size: 15px;
    color: var(--cor-secundaria);
    min-height: 50px;
}
.card__preco {
    font-family: var(--fonte-titulos);
    font-size: 22px;
    font-weight: 800;
    color: var(--cor-primaria);
}

/* Modificador Booleano para Card */
.card--destaque {
    border: 2px solid var(--cor-destaque);
}

/* Modificador Booleano de Selo */
.card--novidade::before {
    content: 'NOVO';
    position: absolute;
    top: 15px;
    right: -30px;
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);
    padding: 5px 30px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1;
}

/* 4. OVERRIDES DA PLATAFORMA (Aplicação da Arquitetura)
-------------------------------------------------------------------------- */

/* Aplica o estilo de card base aos itens de listagem da Loja Integrada */
#listagemProdutos .listagem-item {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-bordas);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    box-shadow: var(--sombra-padrao);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}
#listagemProdutos .listagem-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-grande);
}

/* Aplica os estilos de texto e preço do card */
.listagem-item .nome-produto {
    font-family: var(--fonte-principal);
    font-weight: 500;
    font-size: 15px;
    color: var(--cor-secundaria);
    min-height: 50px;
}
.listagem-item .preco-promocional {
    font-family: var(--fonte-titulos);
    font-size: 22px !important;
    font-weight: 800;
    color: var(--cor-primaria) !important;
}

/* Aplica o estilo de botão ao CTA do produto */
.listagem-item .acoes-produto a.botao-comprar {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);
    transition: all 0.3s ease;
}
.listagem-item .acoes-produto a.botao-comprar:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-destaque);
    transform: scale(1.05);
}