/* FORÇAR LAYOUT DE LISTA VIA CSS EXTERNO */

/* 1. Transforma o grid em uma coluna única vertical */
.products-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 800px;
    margin: 0 auto;
}

/* 2. Transforma o Card em um item de linha (Horizontal) */
.product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    min-height: 110px !important;
    padding: 12px !important;
    text-align: left !important;
}

/* 3. Ajusta a Imagem para ficar pequena à esquerda */
.product-image, .product-image-placeholder {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important; /* Remove margem de baixo do grid */
    object-fit: cover;
}

/* 4. Organiza o corpo do card (Título e Preço) */
.product-body {
    flex: 1 !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
}

.product-title {
    font-size: 1rem !important;
    margin: 0 0 5px 0 !important;
    font-weight: 600 !important;
}

.product-price {
    font-size: 0.95rem !important;
    color: var(--primary-color, #6366f1) !important;
    margin: 0 !important;
}

/* 5. Reposiciona o botão de adicionar à direita */
.product-card .d-flex.justify-content-between {
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
}

.quick-add-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Esconde descrição longa ou botões extras para manter a lista limpa */
.btn-view-details {
    display: none !important;
}