/*
 * Premium Ecológica
 * Shared Catalog Card R1
 *
 * IMPORTANTE:
 * este arquivo NÃO controla quantidade de colunas,
 * largura da PLP, sidebar ou filtros.
 *
 * Apenas:
 * - custom options inline
 * - CTA
 * - estados de escolha
 */


/* =========================================================
   INLINE PRODUCT 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;
}


/* =========================================================
   PRODUCTS WITH ADDITIONAL 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: 39px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #07583f;

    border-radius:
        999px;

    background:
        #07583f;

    color:
        #fff !important;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        760;

    line-height:
        1.1;

    transition:
        .15s ease;
}


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

    background:
        #0b6a4d;

    color:
        #fff !important;
}


/*
 * Quando há outras opções obrigatórias além da
 * voltagem, o Add to Cart direto não é seguro.
 */
body.catalog-category-view
.product-item:has(.premium-card-config--choose)
[data-addto="cart"] {
    display:
        none !important;
}


/* =========================================================
   NATIVE HYVA ADD TO CART — PREMIUM VISUAL
========================================================= */

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;

    transition:
        .15s ease !important;
}


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

    background:
        #0b6a4d !important;

    color:
        #fff !important;
}


body.catalog-category-view
.product-item
[data-addto="cart"]:focus-visible {
    outline:
        2px solid #f0b429 !important;

    outline-offset:
        2px !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;
    }

}


/* =========================================================
   PREMIUM_HUMIDITY_CARD_CSS_R16A
   Chocadeiras - destaque comercial controle de umidade
   ========================================================= */

.catalog-category-view
.product-item:has(.premium-control-highlights--humidity) {
    position: relative;
    border-color: #d8ad2c !important;
    box-shadow:
        0 14px 34px rgba(13, 72, 51, .08),
        0 0 0 1px rgba(216, 173, 44, .28);
    overflow: visible;
    transition:
        box-shadow .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.catalog-category-view
.product-item:has(.premium-control-highlights--humidity):hover {
    border-color: #c89b16 !important;
    box-shadow:
        0 18px 42px rgba(13, 72, 51, .13),
        0 0 0 1px rgba(200, 155, 22, .42);
}


/* Badge premium */

.premium-humidity-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 8;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 30px;
    padding: 6px 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #f8d86a 0%,
            #eabf3b 100%
        );

    color: #193a2f;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;

    box-shadow:
        0 7px 18px rgba(184, 137, 15, .18);
}

.premium-humidity-badge svg {
    flex: 0 0 auto;
}


/* Bloco comparativo */

.premium-control-highlights {
    margin:
        12px 0 14px;

    padding-top: 12px;

    border-top:
        1px solid #edf1ef;
}

.premium-control-features {
    display: grid;
    gap: 8px;
}

.premium-control-feature {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #324c43;

    font-size: 12px;
    line-height: 1.35;
}

.premium-control-feature strong {
    color: #183e31;
    font-weight: 700;
}

.premium-control-feature__icon,
.premium-control-feature__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    min-width: 18px;
    height: 18px;

    color: #08784f;
}

.premium-control-feature__icon--drop {
    color: #0b8559;
}

.premium-control-feature__check {
    font-size: 16px;
    font-weight: 900;
}


/* Benefício comercial */

.premium-humidity-benefit {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-top: 13px;
    padding: 10px 12px;

    border:
        1px solid rgba(220, 177, 53, .22);

    border-radius: 9px;

    background:
        linear-gradient(
            100deg,
            rgba(252, 235, 180, .66),
            rgba(255, 248, 225, .82)
        );
}

.premium-humidity-benefit__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    min-width: 24px;

    color: #d6a617;
    font-size: 18px;
}

.premium-humidity-benefit__copy {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.premium-humidity-benefit__copy strong {
    color: #193a2f;

    font-size: 12px;
    line-height: 1.25;
    font-weight: 800;
}

.premium-humidity-benefit__copy small {
    color: #65756f;

    font-size: 10px;
    line-height: 1.3;
}


/* Mantém espaço visual para o selo sobre a foto */

.catalog-category-view
.product-item:has(.premium-humidity-badge)
.product-image-container {
    margin-top: 8px;
}


/* Mobile */

@media (max-width: 767px) {

    .premium-humidity-badge {
        top: 12px;
        left: 12px;

        min-height: 27px;
        padding: 5px 9px;

        font-size: 9px;
    }

    .premium-control-feature {
        font-size: 11px;
    }

    .premium-humidity-benefit {
        padding: 9px 10px;
    }
}



/* =========================================================
   PREMIUM_SPECIAL_SPECIES_CSS_R16J
   Pássaros / Répteis
   ========================================================= */


/* ---------------------------------------------------------
   PASSAROS
   --------------------------------------------------------- */

.catalog-category-view
.product-item:has(.premium-species-special--birds) {
    border-color: #169682 !important;

    box-shadow:
        0 14px 34px rgba(8, 105, 90, .11),
        0 0 0 1px rgba(22, 150, 130, .25);
}


.catalog-category-view
.product-item:has(.premium-species-special--birds):hover {
    border-color: #087c6b !important;

    box-shadow:
        0 18px 42px rgba(8, 105, 90, .16),
        0 0 0 1px rgba(8, 124, 107, .34);
}


/* ---------------------------------------------------------
   REPTEIS
   --------------------------------------------------------- */

.catalog-category-view
.product-item:has(.premium-species-special--reptiles) {
    border-color: #b98545 !important;

    box-shadow:
        0 14px 34px rgba(113, 77, 33, .10),
        0 0 0 1px rgba(185, 133, 69, .24);
}


.catalog-category-view
.product-item:has(.premium-species-special--reptiles):hover {
    border-color: #956426 !important;

    box-shadow:
        0 18px 42px rgba(113, 77, 33, .15),
        0 0 0 1px rgba(149, 100, 38, .32);
}


/* ---------------------------------------------------------
   BADGE SUPERIOR
   --------------------------------------------------------- */

.premium-species-badge {
    position: absolute;

    top: 16px;
    right: 16px;
    z-index: 9;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding:
        6px 11px;

    border-radius:
        999px;

    font-size:
        10px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .025em;

    text-transform:
        uppercase;
}


.premium-species-badge--birds {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #169682,
            #087c6b
        );

    box-shadow:
        0 7px 18px
        rgba(8, 124, 107, .18);
}


.premium-species-badge--reptiles {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #b98545,
            #956426
        );

    box-shadow:
        0 7px 18px
        rgba(113, 77, 33, .17);
}


.premium-species-badge__icon {
    font-size:
        11px;
}


/* ---------------------------------------------------------
   BENEFICIO
   --------------------------------------------------------- */

.premium-species-benefit {
    display: flex;
    flex-direction: column;

    gap:
        2px;

    margin:
        11px 0 12px;

    padding:
        10px 11px;

    border-radius:
        8px;
}


.premium-species-special--birds
.premium-species-benefit {
    color:
        #075c50;

    border:
        1px solid
        rgba(22, 150, 130, .20);

    background:
        linear-gradient(
            100deg,
            rgba(220, 246, 240, .80),
            rgba(241, 252, 249, .92)
        );
}


.premium-species-special--reptiles
.premium-species-benefit {
    color:
        #704817;

    border:
        1px solid
        rgba(185, 133, 69, .20);

    background:
        linear-gradient(
            100deg,
            rgba(247, 232, 211, .82),
            rgba(253, 247, 238, .94)
        );
}


.premium-species-benefit strong {
    font-size:
        12px;

    line-height:
        1.3;

    font-weight:
        800;
}


.premium-species-benefit small {
    opacity:
        .78;

    font-size:
        10px;

    line-height:
        1.35;
}


/*
 * A IP 35P possui também controle de umidade.
 * Os dois badges ocupam lados diferentes.
 */
.catalog-category-view
.product-item:has(.premium-species-special--birds)
.premium-humidity-badge {
    left:
        16px;

    right:
        auto;
}


@media (max-width: 767px) {

    .premium-species-badge {
        top:
            11px;

        right:
            11px;

        min-height:
            27px;

        padding:
            5px 8px;

        font-size:
            8px;
    }

    .premium-species-benefit {
        padding:
            9px 10px;
    }
}