/* =========================================================
   KARUNGA — WISHLIST
   BASE ESTÁVEL — VERSÃO CORRIGIDA
   ========================================================= */


/* =========================================================
   VARIÁVEIS
   ========================================================= */

.karunga-wishlist-page {
    --kw-primary: #A24008;
    --kw-primary-dark: #7E3006;

    --kw-brown: #63371E;
    --kw-dark: #33241C;

    --kw-teal: #0BCE42;
    --kw-dark-teal: #1E4E4E;

    --kw-white: #FFFFFF;

    --kw-background: #FCFAF7;
    --kw-card: #FFFFFF;

    --kw-border: rgba(51, 36, 28, 0.10);
    --kw-border-strong: rgba(51, 36, 28, 0.16);

    --kw-shadow:
        0 10px 35px rgba(51, 36, 28, 0.06);

    --kw-shadow-hover:
        0 18px 48px rgba(51, 36, 28, 0.11);
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.karunga-wishlist-page,
.karunga-wishlist-page *,
.karunga-wishlist-page *::before,
.karunga-wishlist-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   PÁGINA
   ========================================================= */

.karunga-wishlist-page {
    display: block;

    width: 100%;
    max-width: 100%;

    margin: 0 auto !important;

    padding: 60px 30px 100px;

    font-family:
        "DM Sans",
        sans-serif;

    color:
        var(--kw-dark);

    text-align: center;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* =========================================================
   ESCONDER WISHLIST FLUTUANTE NESTA PÁGINA
   ========================================================= */

body:has(.karunga-wishlist-page)
.karunga-floating-wishlist {
    display: none !important;
}

body:has(.karunga-wishlist-page)
.karunga-floating-wishlist-counter {
    display: none !important;
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

.karunga-wishlist-header {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 0 auto 60px;

    padding: 0;

    text-align: center;
}


/* =========================================================
   DETALHE SUPERIOR
   ========================================================= */

.karunga-wishlist-header::before {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin:
        0
        auto
        25px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--kw-primary),
            var(--kw-teal)
        );
}


/* =========================================================
   LOGO
   ========================================================= */

.karunga-wishlist-logo {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 290px;
    max-width: 80%;

    margin:
        0
        auto
        28px;

    padding: 0;
}

.karunga-wishlist-logo img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: contain;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.karunga-wishlist-heading {
    display: block;

    width: 100%;

    margin: 0 auto;
}

.karunga-wishlist-heading h1 {
    display: block;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 34px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: 1px;

    text-transform: uppercase;

    color:
        var(--kw-brown);
}

.karunga-wishlist-heading p {
    display: block;

    width: 100%;
    max-width: 600px;

    margin:
        12px
        auto
        0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.6;

    color:
        var(--kw-dark);

    opacity: 0.70;
}


/* =========================================================
   CONTADOR
   ========================================================= */

.karunga-wishlist-count {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin:
        22px
        auto
        0;

    padding:
        8px
        15px
        8px
        9px;

    min-height: 38px;

    border:
        1px solid
        rgba(
            162,
            64,
            8,
            0.18
        );

    border-radius: 4px;

    background:
        rgba(
            162,
            64,
            8,
            0.06
        );

    color:
        var(--kw-primary);

    font-family:
        "DM Sans",
        sans-serif;
}

.karunga-wishlist-count-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    margin-right: 8px;

    border-radius: 50%;

    background:
        var(--kw-primary);

    color:
        var(--kw-white);

    font-size: 12px;

    font-weight: 700;

    line-height: 1;
}

.karunga-wishlist-count-label {
    font-size: 13px;

    font-weight: 500;

    line-height: 1;
}


/* =========================================================
   GRID — 4 COLUNAS NO DESKTOP
   ========================================================= */

.karunga-wishlist-grid {
    display: grid;

    width: 100%;
    max-width: 1200px;

    margin:
        0
        auto !important;

    padding: 0;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    column-gap: 20px;

    row-gap: 30px;

    align-items: stretch;
}


/* =========================================================
   CARD — MESMA ALTURA E FLEX
   ========================================================= */

.karunga-wishlist-item {
    display: flex;

    flex-direction: column;

    position: relative;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    border:
        1px solid
        var(--kw-border);

    border-radius: 4px;

    background:
        var(--kw-card);

    box-shadow:
        var(--kw-shadow);

    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.karunga-wishlist-item:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--kw-border-strong);

    box-shadow:
        var(--kw-shadow-hover);
}


/* =========================================================
   IMAGEM — TAMANHO FIXO
   ========================================================= */

.karunga-wishlist-image {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin: 0;

    padding: 0;

    overflow: hidden;

    background:
        #F4F0EB;

    flex-shrink: 0;
}

.karunga-wishlist-image a {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    padding: 0;

    line-height: 0;
}

.karunga-wishlist-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;

    padding: 0;

    border: 0;

    object-fit: cover;

    transition:
        transform 0.45s
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}

.karunga-wishlist-item:hover
.karunga-wishlist-image img {
    transform:
        scale(1.02);
}


/* =========================================================
   INFORMAÇÕES — FLEX PARA CRESCER
   ========================================================= */

.karunga-wishlist-info {
    display: flex;

    flex-direction: column;

    flex: 1 1 auto;

    align-items: center;

    width: 100%;

    margin: 0;

    padding:
        14px
        12px
        16px;

    background:
        var(--kw-card);

    text-align: center;
}


/* =========================================================
   NOME DO PRODUTO
   ========================================================= */

.karunga-wishlist-product-name {
    display: block;

    width: 100%;

    margin: 0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.3;

    letter-spacing: -0.1px;

    color:
        var(--kw-dark);

    /* Limitar a 2 linhas */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

.karunga-wishlist-product-name a {
    color:
        inherit;

    text-decoration:
        none;

    transition:
        color 0.2s ease;
}

.karunga-wishlist-product-name a:hover {
    color:
        var(--kw-primary);
}


/* =========================================================
   PREÇO
   ========================================================= */

.karunga-wishlist-price {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    width: 100%;

    margin-top: 6px;

    gap: 4px;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.3;

    color:
        var(--kw-brown);

    text-align: center;
}

.karunga-wishlist-price del {
    font-size: 12px;

    font-weight: 400;

    opacity: 0.48;
}

.karunga-wishlist-price ins {
    color:
        var(--kw-primary);

    text-decoration:
        none;
}


/* =========================================================
   ÁREA DOS BOTÕES — ALINHADOS NO FINAL
   ========================================================= */

.karunga-wishlist-actions {
    display: flex;

    align-items: stretch;

    justify-content: center;

    width: 100%;

    gap: 6px;

    margin-top: auto;

    padding-top: 10px;

    flex-shrink: 0;
}


/* =========================================================
   BOTÕES — BASE
   ========================================================= */

.karunga-wishlist-actions button {
    flex:
        1 1 0;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    min-height: 34px;

    margin: 0;

    padding:
        6px
        8px;

    border:
        1px solid
        var(--kw-primary);

    border-radius: 4px;

    background:
        var(--kw-primary);

    color:
        var(--kw-white);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.1;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.15px;

    white-space: nowrap;

    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;
}


/* =========================================================
   REMOVER
   ========================================================= */

.karunga-wishlist-remove {
    background:
        var(--kw-primary);

    border-color:
        var(--kw-primary);

    color:
        var(--kw-white);
}

.karunga-wishlist-remove:hover {
    background:
        var(--kw-teal);

    border-color:
        var(--kw-teal);

    color:
        var(--kw-white);

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(
            11,
            206,
            66,
            0.20
        );
}


/* =========================================================
   CARRINHO
   ========================================================= */

.karunga-wishlist-add-cart {
    background:
        var(--kw-primary);

    border-color:
        var(--kw-primary);

    color:
        var(--kw-white);
}

.karunga-wishlist-add-cart:hover {
    background:
        var(--kw-teal);

    border-color:
        var(--kw-teal);

    color:
        var(--kw-white);

    transform:
        translateY(-1px);

    box-shadow:
        0 7px 18px
        rgba(
            11,
            206,
            66,
            0.20
        );
}


/* =========================================================
   ACTIVE
   ========================================================= */

.karunga-wishlist-actions button:active {
    transform:
        translateY(0);
}


/* =========================================================
   FOCUS
   ========================================================= */

.karunga-wishlist-actions button:focus-visible {
    outline:
        2px solid
        var(--kw-teal);

    outline-offset:
        3px;
}


/* =========================================================
   ESTADO DESABILITADO
   ========================================================= */

.karunga-wishlist-actions button:disabled {
    cursor:
        wait;

    opacity:
        0.55;

    transform:
        none;

    box-shadow:
        none;
}


/* =========================================================
   ESTADO VAZIO — VERSÃO COMPLETA COM TODAS AS CLASSES
   ========================================================= */

.karunga-wishlist-empty {
    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding:
        80px
        30px
        100px;

    text-align: center;

    background:
        var(--kw-white);

    border-radius: 8px;

    box-shadow:
        var(--kw-shadow);

    border:
        1px solid
        var(--kw-border);
}


/* =========================================================
   ÍCONE DO CORAÇÃO VAZIO
   ========================================================= */

.karunga-wishlist-empty-heart {
    width: 100px;

    height: 100px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0
        auto
        28px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(
                162,
                64,
                8,
                0.08
            ),
            rgba(
                11,
                206,
                66,
                0.06
            )
        );

    color:
        var(--kw-primary);

    font-size: 52px;

    line-height: 1;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.karunga-wishlist-empty-heart:hover {
    transform:
        scale(1.05);

    box-shadow:
        0 8px 30px
        rgba(
            162,
            64,
            8,
            0.12
        );
}


/* =========================================================
   TÍTULO DO ESTADO VAZIO
   ========================================================= */

.karunga-wishlist-empty h2 {
    margin: 0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 32px;

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -0.5px;

    color:
        var(--kw-dark);
}


/* =========================================================
   SUBTÍTULO / DESCRIÇÃO
   ========================================================= */

.karunga-wishlist-empty-subtitle {
    max-width: 480px;

    margin:
        14px
        auto
        0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;

    color:
        var(--kw-brown);

    opacity: 0.75;
}


/* =========================================================
   TEXTO DE SUGESTÃO
   ========================================================= */

.karunga-wishlist-empty-suggestion {
    max-width: 420px;

    margin:
        10px
        auto
        0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.6;

    color:
        var(--kw-brown);

    opacity: 0.55;
}


/* =========================================================
   SEPARADOR DECORATIVO
   ========================================================= */

.karunga-wishlist-empty-divider {
    width: 60px;

    height: 2px;

    margin:
        28px
        auto
        30px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--kw-primary),
            var(--kw-teal)
        );
}


/* =========================================================
   BOTÃO EXPLORAR PRODUTOS
   ========================================================= */

.karunga-wishlist-shop-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    margin-top: 8px;

    padding:
        14px
        36px;

    border:
        1px solid
        var(--kw-primary);

    border-radius:
        4px;

    background:
        var(--kw-primary);

    color:
        var(--kw-white);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.karunga-wishlist-shop-button:hover {
    background:
        var(--kw-teal);

    border-color:
        var(--kw-teal);

    color:
        var(--kw-white);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(
            11,
            206,
            66,
            0.25
        );
}

.karunga-wishlist-shop-button:active {
    transform:
        translateY(0);

    box-shadow:
        none;
}


/* =========================================================
   ÍCONE DO BOTÃO (SETA)
   ========================================================= */

.karunga-wishlist-shop-button::after {
    content: "→";

    display: inline-block;

    font-size: 18px;

    line-height: 1;

    transition:
        transform 0.25s ease;
}

.karunga-wishlist-shop-button:hover::after {
    transform:
        translateX(4px);
}


/* =========================================================
   LOGIN
   ========================================================= */

.karunga-wishlist-login-message {
    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding:
        60px
        30px
        80px;

    text-align: center;

    background:
        var(--kw-white);

    border-radius: 8px;

    box-shadow:
        var(--kw-shadow);

    border:
        1px solid
        var(--kw-border);
}

.karunga-wishlist-login-message p {
    margin: 0;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.7;

    color:
        var(--kw-brown);

    opacity: 0.75;
}

.karunga-wishlist-login-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 50px;

    margin-top: 24px;

    padding:
        14px
        36px;

    border:
        1px solid
        var(--kw-primary);

    border-radius:
        4px;

    background:
        var(--kw-primary);

    color:
        var(--kw-white);

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing: 0.5px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.karunga-wishlist-login-button:hover {
    background:
        var(--kw-teal);

    border-color:
        var(--kw-teal);

    color:
        var(--kw-white);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(
            11,
            206,
            66,
            0.25
        );
}

.karunga-wishlist-login-button::after {
    content: "→";

    display: inline-block;

    font-size: 18px;

    line-height: 1;

    transition:
        transform 0.25s ease;
}

.karunga-wishlist-login-button:hover::after {
    transform:
        translateX(4px);
}


/* =========================================================
   TABLET — 2 COLUNAS
   ========================================================= */

@media (max-width: 1024px) {

    .karunga-wishlist-page {
        padding:
            50px
            25px
            80px;
    }

    .karunga-wishlist-logo {
        width: 270px;
    }

    .karunga-wishlist-heading h1 {
        font-size: 32px;
    }

    .karunga-wishlist-grid {
        max-width: 820px;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        column-gap: 25px;

        row-gap: 30px;
    }

    .karunga-wishlist-empty {
        padding:
            60px
            25px
            80px;
    }

    .karunga-wishlist-empty-heart {
        width: 85px;

        height: 85px;

        font-size: 44px;
    }

    .karunga-wishlist-empty h2 {
        font-size: 28px;
    }

    .karunga-wishlist-empty-subtitle {
        font-size: 15px;
    }

    .karunga-wishlist-info {
        padding:
            12px
            10px
            14px;
    }

    .karunga-wishlist-product-name {
        font-size: 13px;
        min-height: 34px;
    }

    .karunga-wishlist-price {
        font-size: 14px;
    }

    .karunga-wishlist-actions button {
        font-size: 9px;
        min-height: 32px;
        padding: 5px 6px;
    }
}


/* =========================================================
   MOBILE — 2 COLUNAS
   ========================================================= */

@media (max-width: 767px) {

    .karunga-wishlist-page {
        padding:
            35px
            14px
            60px;
    }

    .karunga-wishlist-header {
        margin-bottom: 40px;
    }

    .karunga-wishlist-header::before {
        width: 34px;

        height: 3px;

        margin-bottom: 21px;
    }

    .karunga-wishlist-logo {
        width: 215px;

        max-width: 85%;

        margin-bottom: 22px;
    }

    .karunga-wishlist-heading h1 {
        font-size: 25px;

        line-height: 1.16;

        letter-spacing: 0.7px;
    }

    .karunga-wishlist-heading p {
        max-width: 340px;

        margin-top: 10px;

        font-size: 14px;
    }

    .karunga-wishlist-count {
        margin-top: 18px;

        min-height: 36px;

        padding:
            7px
            12px
            7px
            9px;
    }

    .karunga-wishlist-count-number {
        width: 23px;

        height: 23px;

        font-size: 11px;
    }

    .karunga-wishlist-count-label {
        font-size: 12px;
    }

    .karunga-wishlist-grid {
        max-width: 560px;

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

        column-gap: 12px;

        row-gap: 20px;
    }

    .karunga-wishlist-item:hover {
        transform: none;

        box-shadow:
            var(--kw-shadow);
    }

    .karunga-wishlist-item:hover
    .karunga-wishlist-image img {
        transform: none;
    }

    .karunga-wishlist-info {
        padding:
            10px
            8px
            12px;
    }

    .karunga-wishlist-product-name {
        min-height: 32px;

        font-size: 12px;

        line-height: 1.3;

        -webkit-line-clamp: 2;
    }

    .karunga-wishlist-price {
        margin-top: 4px;

        font-size: 13px;
    }

    .karunga-wishlist-price del {
        font-size: 10px;
    }

    .karunga-wishlist-actions {
        gap: 4px;

        margin-top: auto;

        padding-top: 8px;
    }

    .karunga-wishlist-actions button {
        min-height: 30px;

        padding:
            5px
            3px;

        font-size: 8px;

        line-height: 1.1;

        letter-spacing: 0;
    }


    /* =====================================================
       ESTADO VAZIO — MOBILE
       ===================================================== */

    .karunga-wishlist-empty {
        padding:
            45px
            18px
            60px;

        border-radius: 6px;
    }

    .karunga-wishlist-empty-heart {
        width: 72px;

        height: 72px;

        font-size: 36px;

        margin-bottom: 20px;
    }

    .karunga-wishlist-empty h2 {
        font-size: 22px;
    }

    .karunga-wishlist-empty-subtitle {
        font-size: 14px;
    }

    .karunga-wishlist-empty-suggestion {
        font-size: 13px;
    }

    .karunga-wishlist-empty-divider {
        width: 48px;

        margin:
            22px
            auto
            24px;
    }

    .karunga-wishlist-shop-button {
        min-height: 46px;

        padding:
            12px
            24px;

        font-size: 13px;

        width: 100%;

        max-width: 280px;

        justify-content: center;
    }

    .karunga-wishlist-shop-button::after {
        font-size: 16px;
    }


    /* =====================================================
       LOGIN — MOBILE
       ===================================================== */

    .karunga-wishlist-login-message {
        padding:
            40px
            18px
            55px;

        border-radius: 6px;
    }

    .karunga-wishlist-login-message p {
        font-size: 14px;
    }

    .karunga-wishlist-login-button {
        min-height: 46px;

        padding:
            12px
            24px;

        font-size: 13px;

        width: 100%;

        max-width: 280px;

        justify-content: center;
    }

    .karunga-wishlist-login-button::after {
        font-size: 16px;
    }
}


/* =========================================================
   CELULAR MUITO PEQUENO
   ========================================================= */

@media (max-width: 380px) {

    .karunga-wishlist-page {
        padding-left: 9px;

        padding-right: 9px;
    }

    .karunga-wishlist-grid {
        column-gap: 8px;

        row-gap: 16px;
    }

    .karunga-wishlist-info {
        padding-left: 6px;

        padding-right: 6px;
    }

    .karunga-wishlist-product-name {
        font-size: 11px;
        min-height: 28px;
    }

    .karunga-wishlist-price {
        font-size: 12px;
    }

    .karunga-wishlist-actions {
        gap: 3px;
    }

    .karunga-wishlist-actions button {
        font-size: 7.5px;

        padding-left: 2px;

        padding-right: 2px;

        min-height: 26px;
    }

    .karunga-wishlist-empty {
        padding:
            35px
            12px
            45px;
    }

    .karunga-wishlist-empty-heart {
        width: 60px;

        height: 60px;

        font-size: 30px;
    }

    .karunga-wishlist-empty h2 {
        font-size: 19px;
    }

    .karunga-wishlist-empty-subtitle {
        font-size: 13px;
    }

    .karunga-wishlist-shop-button {
        font-size: 12px;

        min-height: 42px;

        padding:
            10px
            18px;
    }
}