/* =========================================================
   KARUNGA — HOME SHOP
   POPUP DE COMPRA / SELEÇÃO DE VARIAÇÃO
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

:root {

    --kh-primary: #A24008;
    --kh-primary-dark: #7E3006;

    --kh-green: #0BCE42;

    --kh-brown: #63371E;
    --kh-dark: #33241C;

    --kh-white: #FFFFFF;

    --kh-background: #FCFAF7;
    --kh-border: rgba(51, 36, 28, 0.12);

    --kh-shadow:
        0 24px 80px rgba(51, 36, 28, 0.20);
}


/* =========================================================
   BOTÃO COMPRAR DA HOME
   ========================================================= */

.elementor-widget-products
a.product_type_variable,
.elementor-widget-products
a.add_to_cart_button.product_type_variable {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding:
        11px
        20px;

    border:
        1px solid
        var(--kh-primary);

    border-radius: 4px;

    background:
        var(--kh-primary);

    color:
        var(--kh-white) !important;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 13px;

    font-weight: 600;

    line-height: 1;

    text-align: center;

    text-transform: uppercase;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.elementor-widget-products
a.product_type_variable:hover,
.elementor-widget-products
a.add_to_cart_button.product_type_variable:hover {

    background:
        var(--kh-green);

    border-color:
        var(--kh-green);

    color:
        var(--kh-white) !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(
            11,
            206,
            66,
            0.18
        );
}


/* =========================================================
   EVITAR ESTILO PADRÃO DO WOOCOMMERCE
   ========================================================= */

.elementor-widget-products
a.product_type_variable::after,
.elementor-widget-products
a.add_to_cart_button.product_type_variable::after {

    display: none !important;

    content: none !important;
}


/* =========================================================
   BLOQUEAR SCROLL DA PÁGINA QUANDO MODAL ESTIVER ABERTO
   ========================================================= */

body.karunga-home-shop-modal-open {

    overflow: hidden;

    touch-action: none;
}


/* =========================================================
   MODAL
   ========================================================= */

.karunga-home-shop-modal {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 24px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 999999;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.karunga-home-shop-modal.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.karunga-home-shop-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(
            22,
            14,
            10,
            0.64
        );

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* =========================================================
   DIALOG
   ========================================================= */

.karunga-home-shop-dialog {

    position: relative;

    width: 100%;

    max-width: 470px;

    max-height:
        calc(
            100vh - 48px
        );

    overflow-y: auto;

    border-radius: 8px;

    background:
        var(--kh-white);

    box-shadow:
        var(--kh-shadow);

    transform:
        translateY(
            18px
        )
        scale(
            0.97
        );

    transition:
        transform 0.28s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    -webkit-overflow-scrolling:
        touch;
}


.karunga-home-shop-modal.is-open
.karunga-home-shop-dialog {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   BOTÃO FECHAR
   ========================================================= */

.karunga-home-shop-close {

    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 5;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(
            51,
            36,
            28,
            0.10
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    color:
        var(--kh-dark);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 27px;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.karunga-home-shop-close:hover {

    background:
        var(--kh-green);

    color:
        var(--kh-white);

    transform:
        rotate(90deg);
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.karunga-home-shop-content {

    width: 100%;

    padding:
        36px
        38px
        38px;

    font-family:
        "DM Sans",
        sans-serif;

    color:
        var(--kh-dark);
}


/* =========================================================
   IMAGEM DO PRODUTO
   ========================================================= */

.karunga-home-shop-product-image {

    position: relative;

    width: 100%;

    max-width: 210px;

    min-height: 210px;

    margin:
        0 auto
        25px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 6px;

    background:
        #F4F0EB;
}


/*
 * Imagem real
 */

.karunga-home-shop-product-img {

    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: 260px;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: contain;
}


/*
 * Placeholder
 */

.karunga-home-shop-image-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        #F4F0EB;
}


/*
 * A imagem fica acima do placeholder
 */

.karunga-home-shop-product-img:not([hidden]) {

    position: relative;

    z-index: 2;
}


/* =========================================================
   SPINNER DA IMAGEM
   ========================================================= */

.karunga-home-shop-product-image
.karunga-home-shop-spinner {

    width: 27px;
    height: 27px;

    border:
        3px solid
        rgba(
            162,
            64,
            8,
            0.14
        );

    border-top-color:
        var(--kh-primary);

    border-radius: 50%;

    animation:
        karungaHomeShopSpin
        0.75s
        linear
        infinite;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.karunga-home-shop-eyebrow {

    margin-bottom: 10px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 1.6px;

    text-transform:
        uppercase;

    color:
        var(--kh-primary);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.karunga-home-shop-title {

    width:
        calc(
            100% - 38px
        );

    margin: 0;

    padding: 0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 25px;

    font-weight: 600;

    line-height: 1.22;

    letter-spacing: -0.5px;

    color:
        var(--kh-dark);
}


/* =========================================================
   DESCRIÇÃO
   ========================================================= */

.karunga-home-shop-description {

    margin:
        10px
        0
        0;

    max-width: 360px;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.55;

    color:
        var(--kh-brown);

    opacity: 0.72;
}


/* =========================================================
   DIVISOR
   ========================================================= */

.karunga-home-shop-divider {

    width: 100%;

    height: 1px;

    margin:
        24px
        0
        22px;

    background:
        rgba(
            51,
            36,
            28,
            0.10
        );
}


/* =========================================================
   LEGADO / COMPATIBILIDADE
   ========================================================= */

.karunga-home-shop-loading {

    min-height: 60px;

    display: none;

    align-items: center;
    justify-content: center;

    gap: 12px;

    font-size: 13px;

    font-weight: 500;

    color:
        var(--kh-brown);
}


/* =========================================================
   SPINNER GERAL
   ========================================================= */

.karunga-home-shop-spinner {

    display: block;

    width: 27px;
    height: 27px;

    border:
        3px solid
        rgba(
            162,
            64,
            8,
            0.14
        );

    border-top-color:
        var(--kh-primary);

    border-radius: 50%;

    animation:
        karungaHomeShopSpin
        0.75s
        linear
        infinite;
}


@keyframes karungaHomeShopSpin {

    from {

        transform:
            rotate(0deg);
    }

    to {

        transform:
            rotate(360deg);
    }
}


/* =========================================================
   ERRO
   ========================================================= */

.karunga-home-shop-error {

    margin:
        18px
        0;

    padding:
        13px
        15px;

    border:
        1px solid
        rgba(
            162,
            64,
            8,
            0.18
        );

    border-left:
        3px solid
        var(--kh-primary);

    border-radius:
        4px;

    background:
        rgba(
            162,
            64,
            8,
            0.055
        );

    color:
        var(--kh-brown);

    font-size: 13px;

    font-weight: 500;

    line-height: 1.5;

    text-align: left;
}


/* =========================================================
   OPÇÕES
   ========================================================= */

.karunga-home-shop-options {

    width: 100%;
}


/* =========================================================
   LABEL
   ========================================================= */

.karunga-home-shop-label {

    margin-bottom: 12px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.9px;

    text-transform:
        uppercase;

    color:
        var(--kh-dark);
}


/* =========================================================
   GRADE DOS TAMANHOS
   ========================================================= */

.karunga-home-shop-sizes {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap: 9px;

    width: 100%;
}


/* =========================================================
   BOTÃO DE TAMANHO
   ========================================================= */

.karunga-home-shop-size {

    position: relative;

    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin: 0;

    padding:
        10px
        8px;

    border:
        1px solid
        rgba(
            51,
            36,
            28,
            0.18
        );

    border-radius: 4px;

    background:
        var(--kh-white);

    color:
        var(--kh-dark);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   TAMANHO DISPONÍVEL — HOVER
   ========================================================= */

.karunga-home-shop-size.is-available:hover {

    border-color:
        var(--kh-primary);

    background:
        rgba(
            162,
            64,
            8,
            0.055
        );

    color:
        var(--kh-primary);

    transform:
        translateY(-1px);
}


/* =========================================================
   TAMANHO SELECIONADO
   ========================================================= */

.karunga-home-shop-size.is-selected {

    border-color:
        var(--kh-primary);

    background:
        var(--kh-primary);

    color:
        var(--kh-white);

    box-shadow:
        0 7px 17px
        rgba(
            162,
            64,
            8,
            0.20
        );
}


/* =========================================================
   TAMANHO ESGOTADO
   ========================================================= */

.karunga-home-shop-size.is-unavailable {

    opacity:
        0.42;

    cursor:
        not-allowed;

    text-decoration:
        line-through;

    background:
        #F5F3F0;
}


/* =========================================================
   TAMANHO SELECIONADO — INFORMAÇÃO
   ========================================================= */

.karunga-home-shop-selected {

    display: flex;

    align-items: center;

    min-height: 40px;

    margin-top: 17px;

    padding:
        10px
        13px;

    border-radius:
        4px;

    background:
        rgba(
            11,
            206,
            66,
            0.08
        );

    color:
        #087A2A;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.4;
}


/* =========================================================
   BOTÃO COMPRAR DO POPUP
   ========================================================= */

.karunga-home-shop-add {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 22px;

    padding:
        12px
        20px;

    border:
        1px solid
        var(--kh-primary);

    border-radius:
        4px;

    background:
        var(--kh-primary);

    color:
        var(--kh-white);

    font-family:
        "DM Sans",
        sans-serif;

    font-size:
        13px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        0.25px;

    text-transform:
        uppercase;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.karunga-home-shop-add:hover:not(:disabled) {

    background:
        var(--kh-green);

    border-color:
        var(--kh-green);

    color:
        var(--kh-white);

    transform:
        translateY(-1px);

    box-shadow:
        0 9px 23px
        rgba(
            11,
            206,
            66,
            0.20
        );
}


/* =========================================================
   BOTÃO DESABILITADO
   ========================================================= */

.karunga-home-shop-add:disabled {

    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   ESTADO ADICIONADO
   ========================================================= */

.karunga-home-shop-add.is-added {

    background:
        var(--kh-green);

    border-color:
        var(--kh-green);

    color:
        var(--kh-white);
}


/* =========================================================
   FOCUS
   ========================================================= */

.karunga-home-shop-close:focus-visible,
.karunga-home-shop-size:focus-visible,
.karunga-home-shop-add:focus-visible {

    outline:
        2px solid
        var(--kh-green);

    outline-offset:
        3px;
}


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

@media (max-width: 1024px) {

    .karunga-home-shop-content {

        padding:
            34px
            32px
            34px;
    }


    .karunga-home-shop-dialog {

        max-width:
            450px;
    }


    .karunga-home-shop-title {

        font-size:
            24px;
    }


    .karunga-home-shop-product-image {

        max-width:
            200px;

        min-height:
            200px;
    }
}


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

@media (max-width: 767px) {

    .karunga-home-shop-modal {

        align-items:
            flex-end;

        padding:
            0;
    }


    .karunga-home-shop-overlay {

        background:
            rgba(
                22,
                14,
                10,
                0.58
            );
    }


    .karunga-home-shop-dialog {

        width:
            100%;

        max-width:
            none;

        max-height:
            88vh;

        border-radius:
            12px
            12px
            0
            0;

        transform:
            translateY(
                100%
            );
    }


    .karunga-home-shop-modal.is-open
    .karunga-home-shop-dialog {

        transform:
            translateY(0);
    }


    .karunga-home-shop-content {

        padding:
            27px
            20px
            calc(
                22px +
                env(
                    safe-area-inset-bottom
                )
            );
    }


    /* -----------------------------------------------------
       IMAGEM MOBILE
       ----------------------------------------------------- */

    .karunga-home-shop-product-image {

        width:
            100%;

        max-width:
            170px;

        min-height:
            170px;

        margin-bottom:
            20px;

        border-radius:
            6px;
    }


    .karunga-home-shop-product-img {

        max-height:
            210px;
    }


    /* -----------------------------------------------------
       FECHAR
       ----------------------------------------------------- */

    .karunga-home-shop-close {

        top:
            13px;

        right:
            13px;

        width:
            34px;

        height:
            34px;

        font-size:
            24px;
    }


    /* -----------------------------------------------------
       EYEBROW
       ----------------------------------------------------- */

    .karunga-home-shop-eyebrow {

        font-size:
            10px;

        letter-spacing:
            1.3px;
    }


    /* -----------------------------------------------------
       TÍTULO
       ----------------------------------------------------- */

    .karunga-home-shop-title {

        width:
            calc(
                100% - 36px
            );

        font-size:
            22px;

        line-height:
            1.22;
    }


    /* -----------------------------------------------------
       DESCRIÇÃO
       ----------------------------------------------------- */

    .karunga-home-shop-description {

        max-width:
            320px;

        font-size:
            13px;
    }


    /* -----------------------------------------------------
       DIVISOR
       ----------------------------------------------------- */

    .karunga-home-shop-divider {

        margin:
            20px
            0;
    }


    /* -----------------------------------------------------
       TAMANHOS
       ----------------------------------------------------- */

    .karunga-home-shop-sizes {

        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );

        gap:
            7px;
    }


    .karunga-home-shop-size {

        min-height:
            46px;

        font-size:
            13px;
    }


    /* -----------------------------------------------------
       SELECIONADO
       ----------------------------------------------------- */

    .karunga-home-shop-selected {

        margin-top:
            14px;

        min-height:
            38px;

        padding:
            9px
            11px;

        font-size:
            11px;
    }


    /* -----------------------------------------------------
       BOTÃO
       ----------------------------------------------------- */

    .karunga-home-shop-add {

        min-height:
            48px;

        font-size:
            12px;
    }
}


/* =========================================================
   MOBILE MUITO PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    .karunga-home-shop-content {

        padding-left:
            15px;

        padding-right:
            15px;
    }


    .karunga-home-shop-product-image {

        max-width:
            155px;

        min-height:
            155px;
    }


    .karunga-home-shop-title {

        font-size:
            20px;
    }


    .karunga-home-shop-sizes {

        gap:
            6px;
    }


    .karunga-home-shop-size {

        min-height:
            43px;

        padding:
            8px
            5px;

        font-size:
            12px;
    }
}


/* =========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .karunga-home-shop-modal,
    .karunga-home-shop-dialog,
    .karunga-home-shop-close,
    .karunga-home-shop-size,
    .karunga-home-shop-add,
    .elementor-widget-products
    a.product_type_variable {

        transition:
            none !important;
    }


    .karunga-home-shop-spinner,
    .karunga-home-shop-product-image
    .karunga-home-shop-spinner {

        animation:
            none !important;
    }
}