/*
 * Modo Catálogo por Categoria
 * Ativado somente quando ws_empresa.visualizacao_loja = catalogo_categoria.
 * O HTML e os modais de compra existentes são preservados; muda apenas a apresentação.
 */

#main_menu.modo-catalogo {
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

#main_menu.modo-catalogo > h2.inner,
#main_menu.modo-catalogo > center > h2.inner {
    margin-bottom: 18px;
}

#main_menu.modo-catalogo .categoria-panel {
    margin-bottom: 26px;
}

#main_menu.modo-catalogo .categoria-panel > .panel {
    border: 0;
    box-shadow: none;
    background: transparent;
}

#main_menu.modo-catalogo .categoria-panel .panel-heading {
    border: 0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--catalogo-cor-topo, #8b0000) !important;
}

#main_menu.modo-catalogo .categoria-panel .panel-title,
#main_menu.modo-catalogo .categoria-panel .panel-title a,
#main_menu.modo-catalogo .categoria-panel .panel-title strong {
    color: var(--catalogo-cor-titulo, #ffffff) !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    text-decoration: none;
}

/* No catálogo a categoria é um título, não um sanfonado. */
#main_menu.modo-catalogo .categoria-panel .panel-title a {
    pointer-events: none;
    cursor: default;
}

#main_menu.modo-catalogo .categoria-panel .panel-title i.fa-chevron-down,
#main_menu.modo-catalogo .categoria-panel .panel-title i.fa-chevron-up {
    display: none !important;
}

#main_menu.modo-catalogo .categoria-panel .panel-collapse.collapse {
    display: block !important;
    height: auto !important;
}

#main_menu.modo-catalogo .categoria-panel .panel-body {
    border: 0 !important;
    padding: 0;
}

/* Converte a tabela existente em grade de cards sem duplicar a lógica de compra. */
#main_menu.modo-catalogo table.cart-list {
    display: block;
    width: 100%;
    margin: 0;
    border-collapse: separate;
}

#main_menu.modo-catalogo table.cart-list > thead {
    display: none;
}

#main_menu.modo-catalogo table.cart-list > tbody {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

#main_menu.modo-catalogo table.cart-list > tbody > tr.item-row {
    display: block;
    position: relative;
    min-width: 0;
    height: 100%;
    margin: 0;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: box-shadow .15s ease;
}

#main_menu.modo-catalogo table.cart-list > tbody > tr.item-row:hover {
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
}

#main_menu.modo-catalogo table.cart-list > tbody > tr.item-row > td:first-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: 0 12px 14px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left;
}

#main_menu.modo-catalogo table.cart-list .thumb_menu_list {
    display: block !important;
    float: none !important;
    width: calc(100% + 24px) !important;
    height: 170px !important;
    max-width: none !important;
    margin: 0 -12px 12px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    background: #f5f5f5;
}

#main_menu.modo-catalogo table.cart-list .thumb_menu_list img {
    display: block;
    float: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    margin: 0 !important;
}

#main_menu.modo-catalogo table.cart-list td h5 {
    min-height: 38px;
    margin: 2px 0 6px !important;
    color: #2e4440;
    font-size: 15px !important;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mantém o card compacto como no modelo de catálogo enviado. */
#main_menu.modo-catalogo table.cart-list td:first-child > p {
    display: none;
}

#main_menu.modo-catalogo table.cart-list td:first-child > strong {
    float: none !important;
    display: block;
    width: 100%;
    margin-top: auto;
    padding-top: 6px;
    color: var(--catalogo-cor-topo, #c62828);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
}

#main_menu.modo-catalogo table.cart-list td:first-child > strong b,
#main_menu.modo-catalogo table.cart-list td:first-child > strong span {
    color: inherit !important;
    font-size: inherit;
    font-weight: inherit;
}

/* O segundo TD carrega o modal/formulário. Ele fica fora do layout visual do card,
   mas continua presente para que o clique e a compra funcionem normalmente. */
#main_menu.modo-catalogo table.cart-list > tbody > tr.item-row > td.options {
    position: absolute;
    left: 0;
    top: 0;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible;
}

#main_menu.modo-catalogo table.cart-list > tbody > tr.item-row > td.options > .dropdown,
#main_menu.modo-catalogo table.cart-list > tbody > tr.item-row > td.options .dropdown-options {
    position: static;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Bootstrap modal permanece em tela cheia mesmo estando ligado ao card. */
#main_menu.modo-catalogo .modal {
    cursor: default;
}

@media (max-width: 767px) {
    #main_menu.modo-catalogo {
        padding-top: 0;
    }

    #main_menu.modo-catalogo .categoria-panel {
        margin-bottom: 22px;
    }

    #main_menu.modo-catalogo .categoria-panel .panel-heading {
        padding: 10px 12px;
        margin-bottom: 10px;
        border-radius: 7px;
    }

    #main_menu.modo-catalogo .categoria-panel .panel-title,
    #main_menu.modo-catalogo .categoria-panel .panel-title a,
    #main_menu.modo-catalogo .categoria-panel .panel-title strong {
        font-size: 15px;
    }

    #main_menu.modo-catalogo table.cart-list > tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #main_menu.modo-catalogo table.cart-list > tbody > tr.item-row > td:first-child {
        padding: 0 10px 12px !important;
    }

    #main_menu.modo-catalogo table.cart-list .thumb_menu_list {
        width: calc(100% + 20px) !important;
        height: 145px !important;
        margin: 0 -10px 10px !important;
    }

    #main_menu.modo-catalogo table.cart-list td h5 {
        min-height: 34px;
        font-size: 13px !important;
    }

    #main_menu.modo-catalogo table.cart-list td:first-child > strong {
        font-size: 18px;
    }
}

@media (max-width: 360px) {
    #main_menu.modo-catalogo table.cart-list > tbody {
        gap: 8px;
    }

    #main_menu.modo-catalogo table.cart-list .thumb_menu_list {
        height: 130px !important;
    }
}

/* v1.0.8 - Navegação horizontal por categorias */
#main_menu.modo-catalogo .catalogo-categorias-sticky{
    position:sticky;
    top:58px;
    z-index:96;
    margin:0 0 14px;
    padding:8px 0;
    background:#fff;
    border-bottom:1px solid #ececec;
    box-shadow:0 4px 10px rgba(0,0,0,.04);
}
#main_menu.modo-catalogo .catalogo-categorias-scroll{
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 4px 5px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
#main_menu.modo-catalogo .catalogo-categorias-scroll::-webkit-scrollbar{display:none}
#main_menu.modo-catalogo .catalogo-categoria-chip{
    flex:0 0 auto;
    white-space:nowrap;
    border:1px solid #e5e7eb;
    border-radius:999px;
    background:#fff;
    color:#3f3f46;
    padding:8px 13px;
    font-weight:700;
    line-height:1.1;
    cursor:pointer;
    transition:all .15s ease;
}
#main_menu.modo-catalogo .catalogo-categoria-chip:hover,
#main_menu.modo-catalogo .catalogo-categoria-chip.active{
    color:#fff;
    background:var(--catalogo-cor-topo,#8b0000);
    border-color:var(--catalogo-cor-topo,#8b0000);
}

/* O título da categoria atual permanece visível enquanto seus produtos passam. */
#main_menu.modo-catalogo .categoria-panel .panel-heading{
    position:sticky;
    top:112px;
    z-index:84;
}
#main_menu.modo-catalogo .categoria-panel{
    scroll-margin-top:122px;
}

/* v1.0.8 - Variações fáceis no modal de compra */
.catalogo-variacao-grupo{
    margin:12px 0;
    padding:11px 12px;
    border:1px solid #e7e7e7;
    border-radius:10px;
    background:#fafafa;
}
.catalogo-variacao-grupo h5{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0 0 8px;
    font-weight:800;
}
.catalogo-variacao-obrigatoria,.catalogo-variacao-opcional{
    font-size:10px;
    font-weight:700;
    border-radius:999px;
    padding:4px 7px;
    white-space:nowrap;
}
.catalogo-variacao-obrigatoria{background:#fee2e2;color:#991b1b}
.catalogo-variacao-opcional{background:#e5e7eb;color:#52525b}
.catalogo-variacao-opcoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.catalogo-variacao-opcao{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    margin:0!important;
    padding:9px 10px;
    border:1px solid #ddd;
    border-radius:9px;
    background:#fff;
    cursor:pointer;
}
.catalogo-variacao-opcao input{margin:0;flex:0 0 auto}
.catalogo-variacao-opcao span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.catalogo-variacao-opcao strong{white-space:nowrap;color:var(--catalogo-cor-topo,#8b0000);font-size:12px}
.catalogo-variacao-opcao:has(input:checked){border-color:var(--catalogo-cor-topo,#8b0000);box-shadow:0 0 0 1px var(--catalogo-cor-topo,#8b0000)}

@media(max-width:767px){
    #main_menu.modo-catalogo .catalogo-categorias-sticky{top:55px;margin-left:-2px;margin-right:-2px;padding:7px 2px}
    #main_menu.modo-catalogo .catalogo-categorias-scroll{padding-left:5px;padding-right:5px}
    #main_menu.modo-catalogo .catalogo-categoria-chip{padding:8px 12px;font-size:12px}
    #main_menu.modo-catalogo .categoria-panel .panel-heading{top:105px}
    #main_menu.modo-catalogo .categoria-panel{scroll-margin-top:116px}
    .catalogo-variacao-opcoes{grid-template-columns:1fr}
}