/*
 * Premium Ecológica
 * PLP R1.1
 *
 * Refinamento visual da PLP.
 * Não altera lógica Magento / Hyvä.
 */


/* =========================================================
   PRODUCT CARDS — DENSIDADE E HIERARQUIA
========================================================= */

body.catalog-category-view
.product-item-info,
body.catalog-category-view
.item.product.product-item {
    display: flex;
    flex-direction: column;

    height: 100%;
}


/*
 * Reduz área vazia da imagem.
 */

body.catalog-category-view
.product-item-photo,
body.catalog-category-view
.product.photo.product-item-photo {
    min-height: 245px !important;

    padding:
        22px 18px 6px !important;
}

body.catalog-category-view
.product-item-photo img,
body.catalog-category-view
.product.photo.product-item-photo img {
    max-height: 190px !important;
    max-width: 88% !important;

    object-fit: contain;
}


/*
 * Conteúdo do card mais compacto.
 */

body.catalog-category-view
.product-item-details {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;

    padding:
        4px 18px 17px !important;
}


/*
 * Nome.
 */

body.catalog-category-view
.product-item-name,
body.catalog-category-view
.product.name.product-item-name {
    min-height: 56px !important;

    margin:
        0 0 7px !important;

    display: flex;
    align-items: flex-start;
}

body.catalog-category-view
.product-item-name a,
body.catalog-category-view
.product.name.product-item-name a {
    font-size: 15px !important;
    line-height: 1.38 !important;

    font-weight: 720 !important;
}


/*
 * Rating.
 */

body.catalog-category-view
.product-reviews-summary,
body.catalog-category-view
.rating-summary {
    margin:
        2px 0 7px !important;
}


/*
 * Preço.
 */

body.catalog-category-view
.price-box {
    margin:
        auto 0 6px !important;
}

body.catalog-category-view
.price-box .price,
body.catalog-category-view
.price {
    color: #083e30 !important;

    font-size: 25px !important;
    line-height: 1.1;

    font-weight: 850 !important;
}


/* =========================================================
   CTA — CORREÇÃO HYVÄ
========================================================= */

/*
 * Hyvä usa btn-primary em alguns templates.
 */

body.catalog-category-view
.product-item
.btn-primary,
body.catalog-category-view
.product-item
button.btn-primary,
body.catalog-category-view
.product-item-actions
.btn-primary,
body.catalog-category-view
.product-item
.action.tocart,
body.catalog-category-view
.product-item
button.tocart {
    min-height: 42px !important;

    padding:
        0 17px !important;

    border:
        1px solid #07583f !important;

    border-radius:
        999px !important;

    background:
        #07583f !important;

    background-color:
        #07583f !important;

    color:
        #fff !important;

    font-size:
        11.5px !important;

    font-weight:
        750 !important;

    box-shadow:
        none !important;
}

body.catalog-category-view
.product-item
.btn-primary:hover,
body.catalog-category-view
.product-item
button.btn-primary:hover,
body.catalog-category-view
.product-item-actions
.btn-primary:hover,
body.catalog-category-view
.product-item
.action.tocart:hover,
body.catalog-category-view
.product-item
button.tocart:hover {
    background:
        #0b6a4d !important;

    background-color:
        #0b6a4d !important;

    border-color:
        #0b6a4d !important;

    transform:
        translateY(-1px);
}


/*
 * Ícones laterais.
 */

body.catalog-category-view
.product-item-actions {
    margin-top:
        7px !important;

    align-items: center;
}

body.catalog-category-view
.product-item-actions
.actions-primary {
    flex:
        1 1 auto;
}

body.catalog-category-view
.product-item-actions
.actions-secondary {
    flex:
        0 0 auto;
}

body.catalog-category-view
.product-item-actions
.actions-secondary
button,
body.catalog-category-view
.product-item-actions
.actions-secondary
a,
body.catalog-category-view
.action.towishlist,
body.catalog-category-view
.action.tocompare {
    width:
        38px !important;

    min-width:
        38px !important;

    height:
        38px !important;

    border:
        1px solid #dce5df !important;

    background:
        #f4f7f5 !important;

    color:
        #07583f !important;
}


/* =========================================================
   SIDEBAR
========================================================= */

body.catalog-category-view
.sidebar-main {
    top: 20px;
}

body.catalog-category-view
.block.filter,
body.catalog-category-view
.filter {
    border-radius:
        15px !important;

    box-shadow:
        0 8px 28px rgba(10,70,50,.055)
        !important;
}

body.catalog-category-view
.filter .block-title,
body.catalog-category-view
.filter-title {
    padding:
        19px 19px 10px !important;

    font-size:
        16px !important;
}

body.catalog-category-view
.filter-options,
body.catalog-category-view
.filter-content {
    padding:
        0 17px 17px !important;
}

body.catalog-category-view
.filter-options-content li {
    padding:
        5px 0 !important;
}

body.catalog-category-view
.filter-options-content a {
    font-size:
        12px !important;

    line-height:
        1.42 !important;
}


/* =========================================================
   TOOLBAR
========================================================= */

body.catalog-category-view
.toolbar-products {
    min-height: 50px;
}

body.catalog-category-view
.toolbar
.modes,
body.catalog-category-view
.toolbar
.sorter {
    background:
        #fff !important;

    border:
        1px solid #e0e7e2 !important;

    box-shadow:
        0 6px 20px rgba(10,70,50,.05)
        !important;
}

body.catalog-category-view
.toolbar
.modes {
    padding:
        7px 9px !important;
}

body.catalog-category-view
.toolbar
.sorter {
    padding:
        6px 8px !important;
}

body.catalog-category-view
.toolbar select {
    min-height:
        34px !important;

    border:
        0 !important;

    background:
        #fff !important;

    box-shadow:
        none !important;

    font-size:
        11px !important;
}


/* =========================================================
   PAGINATION
========================================================= */

body.catalog-category-view
.toolbar-bottom {
    margin-top: 26px;
}

body.catalog-category-view
.toolbar-bottom
.toolbar {
    align-items: center;
}

body.catalog-category-view
.pages {
    padding:
        6px !important;

    border-radius:
        999px !important;
}

body.catalog-category-view
.pages-item a,
body.catalog-category-view
.pages-item strong {
    width:
        34px !important;

    height:
        34px !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

    body.catalog-category-view
    .columns {
        grid-template-columns:
            255px minmax(0,1fr)
            !important;

        gap:
            25px !important;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 1023px)
and
(min-width: 768px) {

    body.catalog-category-view
    .product-item-photo,
    body.catalog-category-view
    .product.photo.product-item-photo {
        min-height:
            215px !important;
    }

    body.catalog-category-view
    .product-item-photo img,
    body.catalog-category-view
    .product.photo.product-item-photo img {
        max-height:
            170px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /*
     * Filtro ocupa linha própria,
     * sem sticky.
     */

    body.catalog-category-view
    .sidebar-main,
    body.catalog-category-view
    .sidebar {
        position:
            static !important;
    }


    /*
     * Cards em duas colunas.
     */

    body.catalog-category-view
    .product-item-photo,
    body.catalog-category-view
    .product.photo.product-item-photo {
        min-height:
            145px !important;

        padding:
            10px 8px 3px !important;
    }

    body.catalog-category-view
    .product-item-photo img,
    body.catalog-category-view
    .product.photo.product-item-photo img {
        max-height:
            118px !important;

        max-width:
            94% !important;
    }

    body.catalog-category-view
    .product-item-details {
        padding:
            5px 10px 11px
            !important;
    }

    body.catalog-category-view
    .product-item-name,
    body.catalog-category-view
    .product.name.product-item-name {
        min-height:
            48px !important;
    }

    body.catalog-category-view
    .product-item-name a,
    body.catalog-category-view
    .product.name.product-item-name a {
        font-size:
            10.5px !important;

        line-height:
            1.35 !important;
    }

    body.catalog-category-view
    .price-box .price,
    body.catalog-category-view
    .price {
        font-size:
            18px !important;
    }

    body.catalog-category-view
    .product-item
    .btn-primary,
    body.catalog-category-view
    .product-item
    button.btn-primary,
    body.catalog-category-view
    .product-item-actions
    .btn-primary,
    body.catalog-category-view
    .product-item
    .action.tocart {
        min-height:
            35px !important;

        padding:
            0 9px !important;

        font-size:
            8.5px !important;
    }

    /*
     * Esconde ícones secundários no celular
     * apenas quando necessário para preservar CTA.
     */

    body.catalog-category-view
    .product-item-actions
    .actions-secondary {
        gap: 3px;
    }

    body.catalog-category-view
    .product-item-actions
    .actions-secondary
    button,
    body.catalog-category-view
    .product-item-actions
    .actions-secondary
    a,
    body.catalog-category-view
    .action.towishlist,
    body.catalog-category-view
    .action.tocompare {
        width:
            31px !important;

        min-width:
            31px !important;

        height:
            31px !important;
    }

}