/*
 * Premium Ecológica
 * PLP R1.2A - Native Details Renderer
 */


/* =========================================================
   INLINE OPTIONS
========================================================= */

body.catalog-category-view
.premium-card-config {
    margin:
        8px 0 3px;

    padding-top:
        8px;

    border-top:
        1px solid #edf1ee;
}


body.catalog-category-view
.premium-card-config__fieldset {
    margin: 0;
    padding: 0;

    border: 0;
}


body.catalog-category-view
.premium-card-config__fieldset legend {
    margin:
        0 0 6px;

    padding: 0;

    color:
        #40594f;

    font-size:
        10px;

    font-weight:
        750;

    line-height:
        1.2;
}


body.catalog-category-view
.premium-card-config__choices {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}


body.catalog-category-view
.premium-card-config__choice {
    position: relative;

    display: inline-flex;

    margin: 0;

    cursor: pointer;
}


body.catalog-category-view
.premium-card-config__choice input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


body.catalog-category-view
.premium-card-config__choice span {
    min-width:
        58px;

    min-height:
        29px;

    padding:
        6px 9px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 3px;

    border:
        1px solid #d8e3dc;

    border-radius:
        999px;

    background:
        #fff;

    color:
        #25483c;

    font-size:
        9.5px;

    font-weight:
        720;

    line-height:
        1;

    transition:
        .15s ease;
}


body.catalog-category-view
.premium-card-config__choice
input:checked + span {
    border-color:
        #087044;

    background:
        #e8f7ef;

    color:
        #07583f;

    box-shadow:
        inset 0 0 0 1px #087044;
}


body.catalog-category-view
.premium-card-config__choice
input:focus-visible + span {
    outline:
        2px solid #f0b429;

    outline-offset:
        2px;
}


body.catalog-category-view
.premium-card-config__choice:hover span {
    border-color:
        #75a98e;
}


body.catalog-category-view
.premium-card-config__choice small {
    font-size:
        8px;

    font-weight:
        600;
}


/* =========================================================
   MULTIPLE REQUIRED OPTIONS
========================================================= */

body.catalog-category-view
.premium-card-config__special small {
    margin-bottom:
        7px;

    display:
        block;

    color:
        #667c73;

    font-size:
        8.5px;

    line-height:
        1.35;
}


body.catalog-category-view
.premium-card-config__choose {
    width: 100%;
    min-height: 38px;

    padding:
        0 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #07583f;

    border-radius:
        999px;

    background:
        #07583f;

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        760;
}


body.catalog-category-view
.premium-card-config__choose:hover {
    background:
        #0b6a4d;

    border-color:
        #0b6a4d;

    color:
        #fff;
}


/*
 * Produto com mais de uma configuração obrigatória:
 * escondemos somente o CTA nativo Add to Cart.
 *
 * O link Escolher opções é exibido acima.
 */

body.catalog-category-view
.product-item:has(.premium-card-config--choose)
[data-addto="cart"] {
    display:
        none !important;
}


/* =========================================================
   NATIVE HYVA CTA
========================================================= */

body.catalog-category-view
.product-item
[data-addto="cart"] {
    min-height:
        39px !important;

    border:
        1px solid #07583f !important;

    border-radius:
        999px !important;

    background:
        #07583f !important;

    color:
        #fff !important;

    font-weight:
        750 !important;

    box-shadow:
        none !important;
}


body.catalog-category-view
.product-item
[data-addto="cart"]:hover {
    border-color:
        #0b6a4d !important;

    background:
        #0b6a4d !important;
}


/* =========================================================
   LARGE DESKTOP — 4 PRODUCTS
========================================================= */

@media (min-width: 1280px) {

    body.catalog-category-view
    .products-grid
    .product-items,

    body.catalog-category-view
    ol.products.list.items {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            ) !important;

        gap:
            14px !important;
    }


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

        padding:
            16px 12px 4px
            !important;
    }


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


    body.catalog-category-view
    .product-info {
        padding:
            4px 13px 13px;
    }


    body.catalog-category-view
    .product-item-link {
        font-size:
            12.5px !important;

        line-height:
            1.35 !important;
    }


    body.catalog-category-view
    .price-box .price,

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

}


/* =========================================================
   NOTEBOOK
========================================================= */

@media
(min-width: 1024px)
and
(max-width: 1279px) {

    body.catalog-category-view
    .products-grid
    .product-items,

    body.catalog-category-view
    ol.products.list.items {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }

}


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

@media (max-width: 767px) {

    body.catalog-category-view
    .premium-card-config__fieldset legend {
        font-size:
            8.5px;
    }


    body.catalog-category-view
    .premium-card-config__choice span {
        min-width:
            47px;

        min-height:
            25px;

        padding:
            5px 6px;

        font-size:
            8px;
    }


    body.catalog-category-view
    .premium-card-config__choose {
        min-height:
            34px;

        padding:
            0 7px;

        font-size:
            8px;
    }

}