/* =====================================================================
   Catálogo - Melhorias visuais (foco mobile)
   Arquivo carregado por último no _LayoutSistema.cshtml para sobrescrever
   os skins/templates sem alterar os arquivos base.
   Escopo: itens, carrinho, marcas e categorias.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) IMAGEM DO PRODUTO - nunca estourar o box (corrige a sobreposição)
   Aplica em todas as resoluções: a imagem sempre cabe dentro de .image
   --------------------------------------------------------------------- */
.product .image {
    overflow: hidden;
}

    .product .image a:not(.btn-cart-card) {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

        .product .image img,
        .product .image a img {
            max-width: 100% !important;
            max-height: 100% !important;
            width: auto !important;
            height: auto !important;
            object-fit: contain;
        }

/* ---------------------------------------------------------------------
   1.2) ÍCONE DE CARRINHO no canto do card (estilo marketplace)
   Toque = adiciona | Segurar = remove. Fica no canto superior esquerdo
   da imagem (o coração de favoritos fica no canto direito).
   --------------------------------------------------------------------- */
.btn-cart-card {
    position: absolute !important;
    top: 6px;
    left: 6px;
    right: auto;
    z-index: 20;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    max-width: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #1ca085;
    color: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 1 !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: background 0.2s ease, transform 0.1s ease;
}

    .btn-cart-card:hover,
    .btn-cart-card:focus {
        color: #fff !important;
        background: #178a73;
    }

    .btn-cart-card:active {
        transform: scale(0.9);
    }

    /* Quando o produto está no carrinho */
    .btn-cart-card.no-carrinho {
        background: #0d6e5b;
    }

    .btn-cart-card.loading {
        opacity: 0.5;
        pointer-events: none;
    }

    .btn-cart-card i {
        font-size: 16px;
        line-height: 1 !important;
        margin: 0 !important;
        display: block;
    }

/* Estoque no card: escondido por padrão (desktop usa o label do action-control) */
.product .card-estoque {
    display: none;
}

/* Modal de quantidade (acionado pelo ícone do card) */
.modal-qtd-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

    .modal-qtd-control .modal-qtd-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        padding: 0;
        font-size: 16px;
    }

    .modal-qtd-control #modalQtdInput {
        width: 90px;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        height: 42px;
    }

/* ---------------------------------------------------------------------
   2) GRID DE ITENS no mobile (telas <= 991px)
   Card limpo, sem buracos, botão e quantidade sempre visíveis.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {

    /* O tema fixa .item em 561px (style.css). No mobile isso corta o card e
       faz o botão "Adicionar" sumir. Deixar a altura seguir o conteúdo. */
    .categoryProduct .item,
    .xsResponse .item,
    #listagem .item {
        height: auto !important;
        overflow: visible !important;
    }

    /* Card do produto */
    .product {
        background: #fff;
        border: 1px solid #ececec;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        padding: 8px;
        margin-bottom: 0;
        height: auto !important;
        overflow: visible !important;
    }

    /* Card minimalista (estilo marketplace): some o stepper (+/-) e o botão
       grande de "Adicionar". A adição/remoção é feita pelo ícone no topo.
       Escopo: grids que possuem o ícone (#listagem e #rowProdutos). */
    #listagem .product .action-control,
    #listagem .product #buttonCarrinho,
    #rowProdutos .product .action-control,
    #rowProdutos .product #buttonCarrinho {
        display: none !important;
    }

    /* Box da imagem com altura consistente (compacto p/ 2 colunas) */
    .product .image {
        height: 140px;
        margin-bottom: 6px;
        background: #fff;
    }

    /* Descrição centralizada e título com altura previsível (2 linhas).
       O tema base crava .description{height:135px} e .description p{min-height:55px},
       que sobram como espaço vazio. Neutralizamos aqui. */
    .product .description {
        text-align: center;
        padding: 0 2px;
        height: auto !important;
        min-height: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

        .product .description p {
            min-height: 0 !important;
        }

    .product .list-description,
    .product .size {
        display: none !important;
    }

    .product #xCondMsg {
        min-height: 0 !important;
    }

        .product .description h4 {
            font-size: 12.5px;
            line-height: 1.3;
            min-height: 33px;
            margin: 4px 0 2px;
            /* 2 linhas completas com reticências (sem cortar no meio) */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            word-break: break-word;
        }

        .product .description h4 a {
            color: #333;
        }

    .product .product-code {
        text-align: center;
        font-size: 11px;
    }

    /* Esconde a descrição longa no card compacto */
    .product .grid-description {
        display: none;
    }

    /* Preço em destaque e centralizado */
    .product .price {
        text-align: center;
        margin: 4px 0;
    }

        .product .price span {
            font-size: 16px;
        }

    /* Estoque no canto inferior esquerdo do card (no mobile o label do
       action-control fica escondido, então mostramos aqui) */
    .product .card-estoque {
        display: block;
        text-align: left;
        font-size: 11px;
        color: #888;
        margin-top: 6px;
        padding-left: 2px;
    }

        .product .card-estoque b {
            color: #1ca085;
        }

    /* Margem inferior do card (compensa a ausência do botão) */
    #listagem .product,
    #rowProdutos .product {
        padding-bottom: 12px;
    }
}

/* ---------------------------------------------------------------------
   2.1) HOME - grid de produtos em 2 colunas no mobile
   A partial _PartialProdutosHomeCatalogo limita #rowProdutos a ~250px
   (1 coluna). Aqui forçamos 2 colunas, com maior especificidade (#id).
   --------------------------------------------------------------------- */
@media (max-width: 991px) {

    body #rowProdutos {
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 5px !important;
    }

    #rowProdutos .item {
        width: 50% !important;
        max-width: 50% !important;
        float: none !important;
        padding: 5px !important;
        margin: 0 0 10px 0 !important;
        height: auto !important;
    }

    #rowProdutos .product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Imagem compacta (a partial usa 270px / quadrado) */
    #rowProdutos .product .image {
        height: 150px !important;
        padding-top: 0 !important;
    }

        #rowProdutos .product .image img,
        #rowProdutos .product img.product-img,
        #rowProdutos .product img.img-responsive {
            object-fit: contain !important;
        }

    #rowProdutos .price {
        padding-top: 8px !important;
    }
}

/* ---------------------------------------------------------------------
   3) CARRINHO mobile (navbar-cart) e mini-carrinho (web)
   --------------------------------------------------------------------- */
.miniCartTable .miniCartProduct {
    border-bottom: 1px solid #f0f0f0;
}

.miniCartProductThumb img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #eee;
}

.miniCartDescription h4 {
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
}

@media (max-width: 991px) {

    .navbar-cart .cartMenu {
        padding: 8px;
    }

    .navbar-cart .miniCartTable {
        max-height: 55vh;
    }

    .navbar-cart .miniCartProduct td {
        padding: 8px 4px;
        vertical-align: middle;
    }

    /* Barra de limite de crédito no topo, legível no mobile */
    .cabecalho-limite {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   3.1) FILTRO LATERAL (marcas/categorias) - botão "Filtro" recolhível
   Toggle 100% CSS (checkbox hack), sem JS, não toca nos onclick da árvore.
   Desktop: botão escondido e filtro sempre visível. Mobile: recolhido.
   --------------------------------------------------------------------- */
.filtro-catalogo-check {
    display: none;
}

.filtro-catalogo-toggle {
    display: none; /* escondido no desktop */
}

@media (max-width: 991px) {

    .filtro-catalogo-toggle {
        display: block;
        width: 100%;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 14px;
        margin-bottom: 10px;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        text-align: left;
    }

        .filtro-catalogo-toggle .fa {
            margin-right: 8px;
        }

    /* Filtro recolhido por padrão no mobile */
    .filtro-catalogo-check ~ .submit-line,
    .filtro-catalogo-check ~ ul.tree {
        display: none;
    }

    /* Abre ao tocar no botão */
    .filtro-catalogo-check:checked ~ .submit-line,
    .filtro-catalogo-check:checked ~ ul.tree {
        display: block;
    }

    /* Coluna do filtro sem o padding-top gigante no mobile */
    .main-container > .col-sm-12:first-child {
        padding-top: 10px !important;
    }
}

/* ---------------------------------------------------------------------
   4) MARCAS e CATEGORIAS (.subCategoryList)
   Cards uniformes, imagem centralizada e título sem quebrar o layout.
   --------------------------------------------------------------------- */
.subCategoryList .thumbnail.equalheight {
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .subCategoryList .thumbnail.equalheight:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

.subCategoryList .subCategoryThumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    overflow: hidden;
}

    .subCategoryList .subCategoryThumb img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
    }

.subCategoryList .subCategoryTitle {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: #333;
}

@media (max-width: 767px) {

    /* 2 cards por linha no celular (mais legível que 3 col-xs-4) */
    .subCategoryList > div[class*="col-xs-"] {
        width: 50%;
        padding: 5px;
    }

    .subCategoryList .subCategoryThumb {
        height: 90px;
    }

    .subCategoryList .section-title.style2 {
        font-size: 18px;
    }
}

/* ---------------------------------------------------------------------
   5) PÁGINA DE PRODUTO (VisualizarProdutoCatalogo) no mobile
   Título menor, preço em destaque, espaçamento e imagem contida.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

    .main-container .row.transitionfx {
        padding: 6px 14px 20px !important;
        margin: 0 !important;
    }

    /* Coluna de detalhes ocupa a largura toda, sem padding lateral do Bootstrap */
    .prod-details > .col-lg-6,
    .prod-details > .col-md-6,
    .prod-details > .col-sm-6 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    /* Título do produto: menor e legível */
    .product-title {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin: 12px 0 8px !important;
        font-weight: 700;
        word-break: break-word;
    }

    /* Marca / Categoria / Código */
    .prod-details .product-code {
        font-size: 13px !important;
        margin: 2px 0 !important;
        color: #555;
    }

    /* Preço em destaque */
    .product-price {
        margin: 12px 0 !important;
    }

        .product-price .price-sales {
            font-size: 24px !important;
            font-weight: 700;
            color: #1ca085 !important;
        }

        .product-price .price-standard {
            font-size: 15px !important;
            color: #999 !important;
            text-decoration: line-through;
        }

    .details-description {
        font-size: 13px;
        color: #666;
        margin-top: 8px;
    }

    /* Imagem principal centralizada e contida (sem crop) */
    .main-image {
        flex-wrap: wrap;
    }

        .main-image a:first-child img {
            max-width: 100% !important;
            width: auto !important;
            max-height: 320px !important;
            height: auto !important;
            object-fit: contain !important;
            margin: 0 auto;
        }

    /* Botão de adicionar na página de produto ocupando a largura */
    .prod-details .btn-addtocart,
    .prod-details #addCarrinho,
    .prod-details .btn-primary {
        width: 100%;
        max-width: 320px;
    }
}

/* ---------------------------------------------------------------------
   6) PÁGINA DO CARRINHO (VisualizarCarrinho) no mobile
   Converte cada linha da tabela em um card limpo (sem mexer no JS).
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Tira o deslocamento que quebra o layout e faz a tabela virar blocos */
    #ctnerCarrinho table,
    #ctnerCarrinho tbody {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Esconde a linha espaçadora (tds vazios que definem larguras) */
    #ctnerCarrinho tbody > tr:not(.CartProduct) {
        display: none;
    }

    /* Cada produto = um card */
    #ctnerCarrinho .CartProduct {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
        border: 1px solid #ececec;
        border-radius: 8px;
        padding: 8px;
        margin-bottom: 10px;
        background: #fff;
    }

        #ctnerCarrinho .CartProduct > td {
            display: block;
            border: none !important;
            padding: 2px 4px !important;
            vertical-align: middle;
        }

        /* checkbox */
        #ctnerCarrinho .CartProduct > td.text-center {
            order: 1;
            width: 22px;
        }

        /* imagem */
        #ctnerCarrinho .CartProduct > td.CartProductThumb {
            order: 2;
            width: 58px;
        }

            #ctnerCarrinho .CartProduct > td.CartProductThumb img {
                max-width: 54px;
                max-height: 54px;
                object-fit: contain;
                border: 1px solid #eee;
                border-radius: 6px;
            }

        /* info: nome, código, excluir (empurra o resto pra 2ª linha) */
        #ctnerCarrinho .CartProduct > td:nth-child(3) {
            order: 3;
            flex: 1 1 55%;
            min-width: 120px;
            text-align: left;
        }

        /* quantidade */
        #ctnerCarrinho .CartProduct > td:nth-child(5) {
            order: 4;
            width: 76px;
        }

            #ctnerCarrinho .CartProduct > td:nth-child(5) input {
                width: 70px;
            }

        /* preço unitário */
        #ctnerCarrinho .CartProduct > td:nth-child(4) {
            order: 5;
            color: #888;
            font-size: 12px;
        }

            #ctnerCarrinho .CartProduct > td:nth-child(4)::before {
                content: "Unit.: ";
                color: #aaa;
            }

        /* subtotal (destaque, à direita) */
        #ctnerCarrinho .CartProduct > td.price {
            order: 6;
            margin-left: auto;
            text-align: right !important;
            font-weight: 700;
            font-size: 15px;
            color: #1ca085;
        }
}

/* ---------------------------------------------------------------------
   7) HISTÓRICO e DETALHE do PEDIDO (ListaPedidos / CadastroPedido)
   --------------------------------------------------------------------- */
/* Detalhe: textos longos (Chave de NF, endereço) não podem estourar */
.statusContent p,
.statusTop p,
.order-box p {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Imagem do item no detalhe do pedido */
.order-details-cart .cartProductThumb img {
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 6px;
}

@media (max-width: 768px) {

    .main-container .order-box {
        padding: 0 !important;
    }

    /* Tabela de itens do detalhe: compacta e sem corte */
    .order-details-cart {
        width: 100% !important;
    }

        .order-details-cart .cartProduct td,
        .order-details-cart .cartTotalTr td {
            padding: 6px 4px !important;
            vertical-align: middle;
            font-size: 13px;
        }

        .order-details-cart .miniCartDescription h4 {
            font-size: 13px;
            line-height: 1.25;
            margin: 0 0 4px;
            word-break: break-word;
        }

    /* Histórico (FooTable): legibilidade no mobile */
    .footable td,
    .footable th {
        font-size: 13px;
        padding: 8px 6px !important;
    }

        .footable .footable-toggle {
            color: #1ca085;
        }
}