/* ARQUIVO DE SOBREPOSIÇÃO FINAL 
   Layout: Lista | Imagem: Direita | Botão: Inferior Direito 
   Categorias: Espaçadas | Logo: Círculo Perfeito | Carrinho: Estilo App
*/

:root {
    --accent-color: var(--primary-color, #6366f1); 
}

/* --- 1. LOGO REDONDO PERFEITO --- */
.store-logo, .header img, .navbar-brand img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 auto 20px auto !important; /* Margem inferior para afastar do nome da loja */
}

/* --- 2. CATEGORIAS (Ajustado para ficar mais para baixo) --- */
.category-title, .section-title {
    background-color: #ffffff !important;
    color: var(--accent-color) !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    border: 1px solid #eee !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    /* Aumentamos a margem superior (mt) para descer o título */
    margin: 35px 0 15px 12px !important; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
}

/* --- 3. PADRONIZAÇÃO DE CORES (ACCENT COLOR) --- */
.btn-primary, .btn-success, .quick-add-btn, #btn-finalizar-pedido, .btn-carrinho-modern {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: #ffffff !important;
}

.product-price, .text-primary {
    color: var(--accent-color) !important;
}

/* --- 4. ESTRUTURA DE LISTA --- */
.products-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 10px !important;
    max-width: 850px !important;
    margin: 0 auto !important;
}

/* --- 5. CARTÃO DO PRODUTO (LISTA) --- */
.product-card {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 15px !important;
    min-height: 110px !important;
    border: 1px solid #f2f2f2 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

/* --- 6. TEXTO À ESQUERDA --- */
.product-body {
    order: 1 !important;
    flex: 1 !important;
    padding-right: 55px !important; 
    text-align: left !important;
}

.product-title {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    color: #2d3436 !important;
}

/* --- 7. IMAGEM À DIREITA --- */
.product-image, .product-image-placeholder {
    order: 2 !important;
    width: 85px !important;
    height: 85px !important;
    min-width: 85px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 15px !important;
    object-fit: cover !important;
    margin-left: 12px !important;
}

/* --- 8. BOTÃO DE ADIÇÃO (CANTO INFERIOR DIREITO) --- */
.quick-add-btn {
    position: absolute !important;
    right: 15px !important;
    bottom: 15px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 100px !important;
    z-index: 5 !important;
}

/* --- 9. CARRINHO E REMOÇÃO DE RESUMO --- */
.btn-carrinho-modern {
    position: fixed !important;
    bottom: 25px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 480px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 25px !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.18) !important;
    z-index: 9999 !important;
}

.cart-amount-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    padding: 6px 15px !important;
    border-radius: 14px !important;
    font-weight: bold !important;
}

/* Esconder Resumo no Modal de Sucesso */
.order-summary-box, [id*="success"] .order-summary-box { 
    display: none !important; 
}

.btn-view-details, #view-cart-btn { display: none !important; }





/* DESIGN MODERNO - ARENA PDV */

.header {
    position: relative !important;
    min-height: 250px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 15px !important;
    border-radius: 0 0 35px 35px !important;
    overflow: hidden !important;
    background-color: #1a1a1a !important; /* Cor de fundo de segurança */
    background-size: cover !important;
    background-position: center !important;
    z-index: 1 !important;
}

/* OVERLAY MAIS ESCURO (Para destacar o texto e botões) */
.header::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Overlay escuro (60% de opacidade) */
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}