﻿@media screen and (min-width:762px) {
    .hide-desktop {
        display: none;
    }

    .page-header-container {
        max-width: 1080px;
    }

    .card-pesquisa {
        padding: 0.5rem;
    }

    .shopping-cart-fab {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        z-index: 20;
    }

        .shopping-cart-fab button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: hsl(199 88.7% 48.4%);
            color: #FFF;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 100%;
            text-decoration: none;
        }

            .shopping-cart-fab button:hover {
                background-color: hsl(199 88.7% 58.4%);
                color: #FFF;
            }

            .shopping-cart-fab button:active {
                background-color: hsl(199 88.7% 48.4%) !important;
                color: #FFF !important;
            }

            .shopping-cart-fab button i {
                font-size: 1.25rem;
            }

        .shopping-cart-fab .counter {
            content: attr(data-count);
            position: absolute;
            top: -0.25rem;
            right: -0.25rem;
            background: #FFF;
            width: 1.5rem;
            height: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.835rem;
            font-weight: 600;
            border-radius: 100%;
            border: 2px solid var(--color--main);
            color: var(--color--main);
        }

    .filters-list {
        padding: 1rem;
        border: 1px solid hsl(var(--border-color-hsl));
        border-radius: 1rem;
    }

    .sidebar-cart{
        margin-right:0.5rem;
    }
}

@media screen and (min-width: 992px) {
    .filters-column.col-lg-2 {
        width: 20%;   
    }
    .products-column.col-lg-10 {
        width: 80%;
    }
}
