/* =========================================================
   PRODUCTS
========================================================= */

.products-section{
    display:flex;
    flex-direction:column;
    gap:28px;
}


/* =========================================================
   CATEGORY GRID
   Cada categoria é um card que leva pra sua página dedicada
   (ver sections/products.html e main.category_detail) — antes
   era um sistema de abas que trocava o conteúdo inline.
========================================================= */

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

    gap:20px;

    margin-top:20px;

}

.category-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    border-radius:20px;

    text-decoration:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(69,172,171,.16);

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.category-card:hover{

    transform:translateY(-6px);

    border-color:rgba(69,172,171,.4);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 20px rgba(69,172,171,.18);

}

.category-card__media{

    display:block;

    height:140px;

    overflow:hidden;

    background:rgba(255,255,255,.03);

}

.category-card__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.category-card:hover .category-card__media img{

    transform:scale(1.06);

}

.category-card__body{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px 20px;

}

.category-card__icon{

    display:flex;

    flex-shrink:0;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:14px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    box-shadow:0 8px 20px rgba(69,172,171,.28);

}

.category-card__text{

    display:flex;

    flex-direction:column;

    gap:2px;

    /* Deixa o texto encolher e empurra a seta pro fim do card */
    min-width:0;

    margin-right:auto;

}

.category-card__name{

    color:#fff;

    font-size:1.05rem;

    font-weight:700;

    line-height:1.25;

    /* Nomes de categoria vêm da loja (Shopify) e podem trazer palavras
       longas — "Segurança Inteligente", por exemplo. Sem isto a palavra
       que não cabe estoura a caixa e some no `overflow:hidden` do card. */
    overflow-wrap:anywhere;

    hyphens:auto;

}

.category-card__count{

    color:var(--muted);

    font-size:.85rem;

}

.category-card__arrow{

    display:flex;

    flex-shrink:0;

    align-items:center;

    justify-content:center;

    color:var(--cyan);

    transition:transform .35s ease;

}

.category-card:hover .category-card__arrow{

    transform:translateX(4px);

}


/* =========================================================
   FEATURED GRID
========================================================= */

.featured-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(230px,1fr));

    gap:24px;

    margin-bottom:16px;

}

@media(max-width:1024px){

    .featured-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:560px){

    .featured-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:960px){

    /* A grade já sobra na vitrine em rolagem infinita logo acima —
       repetir os mesmos produtos numa grade estática é desperdício
       de espaço numa tela pequena. */
    .featured-grid{

        display:none;

    }

}

@media(max-width:560px){

    /* Dois cards de categoria por linha no celular, mais compactos */
    .category-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

    .category-card__media{

        height:96px;

    }

    /* Empilhado: com o ícone ao lado sobravam ~40px pro nome no card
       de 2 colunas, estreito demais pra "Inteligente" — a palavra
       vazava e era cortada na borda. Em cima, o texto usa a largura
       inteira do card. */
    .category-card__body{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:12px 12px 14px;

    }

    .category-card__icon{

        width:36px;

        height:36px;

        border-radius:11px;

    }

    .category-card__text{

        width:100%;

        margin-right:0;

    }

    .category-card__name{

        /* Acompanha a largura do card: encolhe nos telefones bem
           estreitos em vez de forçar a quebra da palavra. */
        font-size:clamp(.78rem, 3.4vw, .95rem);

    }

    .category-card__count{

        font-size:.75rem;

    }

    /* No card compacto a seta ocupa espaço sem agregar — o card
       inteiro já é clicável. */
    .category-card__arrow{

        display:none;

    }

}

/* =========================================================
   PRODUCTS GRID
========================================================= */

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

}


/* =========================================================
   GRADE DE RESULTADOS DE BUSCA (cards compactos)
========================================================= */

.search-results-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(200px,1fr));

    gap:18px;

}

@media(max-width:480px){

    .search-results-grid{

        grid-template-columns:repeat(2,1fr);

        gap:12px;

    }

}

.load-more-btn{

    display:flex;

    margin:32px auto 0;

}

.load-more-btn:disabled{

    opacity:.6;

    cursor:wait;

}

.product-card--compact{

    padding:14px;

}

.product-card--compact .product-image{

    height:110px;

    margin:-14px -14px 12px;

}

.product-card--compact .product-favorite{

    top:8px;
    right:8px;

    width:30px;

    height:30px;

}

.product-card--compact .product-badge{

    top:8px;
    left:8px;

    padding:4px 10px;

    font-size:.66rem;

}

.product-card--compact h3{

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

    margin-bottom:6px;

    font-size:.8rem;

    line-height:1.35;

}

.product-card--compact .product-price{

    margin-top:2px;

    font-size:1rem;

}

.product-card--compact .product-actions{

    margin-top:10px;

}

.product-card--compact .product-actions .btn{

    padding:8px 10px;

    font-size:.78rem;

}

.search-empty{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    padding:60px 20px;

    color:var(--muted);

    text-align:center;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    padding:24px;

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(69,172,171,.14);

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.product-card:hover{

    transform:translateY(-8px);

    border-color:rgba(69,172,171,.35);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.02)
        );

    box-shadow:

        0 20px 45px rgba(0,0,0,.35),

        0 0 22px rgba(69,172,171,.16);

}


/* =========================================================
   LIGHT EFFECT
========================================================= */

.product-card::before{

    content:"";

    position:absolute;

    inset:-40%;

    background:

        radial-gradient(

            circle,

            rgba(69,172,171,.10),

            transparent 70%

        );

    opacity:0;

    transition:.45s ease;

}

.product-card:hover::before{

    opacity:1;

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image{

    display:flex;

    align-items:center;

    justify-content:center;

    height:180px;

    margin:-24px -24px 20px;

    overflow:hidden;

    border-radius:22px 22px 0 0;

    background:rgba(255,255,255,.03);

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:

        transform .45s ease;

}

.product-card:hover .product-image img{

    transform:scale(1.05);

}

.product-image-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    color:var(--muted);

}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.product-card h3{

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

    margin-bottom:12px;

    font-size:1rem;

    line-height:1.4;

    color:#fff;

}


/* =========================================================
   CARD CLICÁVEL (stretched link)
   O link do título cobre todo o card, sem aninhar <a>.
========================================================= */

.product-card__link{

    color:inherit;

    text-decoration:none;

    transition:color var(--transition);

}

/* Camada invisível que estende a área de clique do título */
.product-card__link::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

}

.product-card:hover .product-card__link{

    color:var(--cyan);

}

.product-actions{

    margin-top:16px;

}

/* Mantém o botão "Ver detalhes" acima da camada do stretched link */
.product-actions .btn{

    position:relative;

    z-index:2;

    width:100%;

}


/* =========================================================
   FAVORITE BUTTON
========================================================= */

.product-favorite{

    position:absolute;

    top:14px;
    right:14px;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.14);

    background:rgba(11,16,32,.55);

    backdrop-filter:blur(6px);

    color:#fff;

    cursor:pointer;

    transition:
        transform .25s ease,
        color .25s ease,
        border-color .25s ease,
        background .25s ease;

}

.product-favorite:hover{

    transform:translateY(-2px);

    border-color:rgba(255,107,129,.40);

}

.product-favorite[aria-pressed="true"]{

    color:#ff6b81;

    border-color:rgba(255,107,129,.45);

    background:rgba(255,107,129,.14);

}

.product-favorite[aria-pressed="true"] svg{

    fill:currentColor;

}


/* =========================================================
   ADICIONAR RÁPIDO
   Botão "+" sobre a imagem — adiciona 1 unidade ao carrinho sem
   sair da página (padrão de apps de e-commerce).
========================================================= */

.product-media{

    position:relative;

}

.product-quick-add{

    position:absolute;

    right:6px;
    bottom:6px;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    color:#fff;

    background:linear-gradient(135deg,var(--cyan),var(--cyan-2));

    box-shadow:0 8px 20px rgba(69,172,171,.35);

    transition:transform .25s ease, box-shadow .25s ease;

}

.product-quick-add:hover{

    transform:scale(1.08);

    box-shadow:0 10px 24px rgba(69,172,171,.5);

}

.product-quick-add.is-added{

    animation:quickAddPulse .5s ease;

}

@keyframes quickAddPulse{

    0%{ transform:scale(1); }
    40%{ transform:scale(1.25); background:linear-gradient(135deg,#4ade80,#22c55e); }
    100%{ transform:scale(1); }

}

.product-card--compact .product-quick-add{

    right:4px;
    bottom:4px;

    width:32px;

    height:32px;

}


/* =========================================================
   PRODUCT BADGE
========================================================= */

.product-badge{

    position:absolute;

    top:18px;
    left:18px;

    display:inline-flex;

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

    padding:6px 14px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.5px;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );

    box-shadow:
        0 8px 18px rgba(69,172,171,.30);

}


/* =========================================================
   PRICE
========================================================= */

.product-price{

    display:flex;

    align-items:flex-end;

    gap:8px;

    /* Empurra preço + botão para o rodapé do card, mesmo quando
       cards vizinhos têm título maior/menor (grid de altura igual). */
    margin-top:auto;

    padding-top:6px;

    font-size:1.3rem;

    font-weight:700;

    color:var(--cyan);

}

.product-price .old-price{

    font-size:.95rem;

    color:rgba(255,255,255,.35);

    text-decoration:line-through;

}

.product-price .current-price{

    font-size:1.8rem;

    font-weight:700;

    color:#fff;

}

.product-price .currency{

    font-size:1rem;

    color:var(--muted);

}


/* =========================================================
   INSTALLMENTS
========================================================= */

.product-installments{

    margin-top:8px;

    font-size:.88rem;

    color:var(--muted);

}


/* =========================================================
   STOCK
========================================================= */

.product-stock{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:18px;

    font-size:.9rem;

    color:#89ffb4;

}

.product-stock::before{

    content:"";

    width:8px;
    height:8px;

    border-radius:50%;

    background:#5BFF8A;

    box-shadow:
        0 0 10px rgba(91,255,138,.55);

}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.product-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:22px;

}


/* =========================================================
   DETAILS BUTTON
========================================================= */

.product-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

    background:

        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.product-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 12px 24px rgba(69,172,171,.30);

}


/* =========================================================
   FAVORITE BUTTON
========================================================= */

.product-favorite{

    display:flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    color:#fff;

    cursor:pointer;

    transition:.3s ease;

}

.product-favorite:hover{

    transform:translateY(-2px);

    border-color:rgba(69,172,171,.30);

    background:rgba(69,172,171,.10);

}


/* =========================================================
   HOVER DETAILS
========================================================= */

.product-card:hover .product-price .current-price{

    color:var(--cyan);

}


/* =========================================================
   VITRINES (rolagem infinita — direita p/ esquerda)
========================================================= */

.vitrines{

    position:relative;

    overflow:hidden;

    margin:32px 0 48px;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000 8%,
            #000 92%,
            transparent
        );

}

.vitrines-track{

    display:flex;

    width:max-content;

    animation:vitrinesScroll 40s linear infinite;

}

.vitrines:hover .vitrines-track{

    animation-play-state:paused;

}

.vitrines-group{

    display:flex;

    flex-shrink:0;

    gap:20px;

    padding-right:20px;

}

.vitrine{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:8px;

    width:260px;

    padding:22px 24px;

    overflow:hidden;

    /* card é um link: remove estilo padrão de âncora */
    color:inherit;

    text-decoration:none;

    cursor:pointer;

    border-radius:var(--radius-md);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(69,172,171,.16);

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.vitrine:hover{

    transform:translateY(-6px);

    border-color:rgba(69,172,171,.4);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 20px rgba(69,172,171,.18);

}

.vitrine-image{

    display:flex;

    align-items:center;

    justify-content:center;

    height:160px;

    margin:-22px -24px 4px;

    overflow:hidden;

    background:rgba(255,255,255,.03);

}

.vitrine-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.vitrine:hover .vitrine-image img{

    transform:scale(1.05);

}

.vitrine-image-placeholder{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    color:var(--muted);

}

.vitrine-tag{

    position:absolute;

    top:14px;
    left:14px;

    padding:5px 12px;

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.5px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            var(--blue)
        );

    box-shadow:
        0 6px 16px rgba(69,172,171,.28);

}

.vitrine-title{

    display:-webkit-box;

    -webkit-line-clamp:2;

    line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    font-size:1.15rem;

    line-height:1.35;

    color:#fff;

    transition:color var(--transition);

}

.vitrine:hover .vitrine-title{

    color:var(--cyan);

}

.vitrine-desc{

    font-size:.9rem;

    color:var(--muted);

    line-height:1.5;

    /* descrições reais variam de tamanho: limita a 2 linhas */
    display:-webkit-box;

    -webkit-line-clamp:2;

    line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* No mobile os cards ficam bem menores — cabe muito mais na tela,
   e o título não precisa aparecer inteiro (2 linhas com reticências
   já dão pra identificar o produto). */
@media(max-width:960px){

    .vitrine{

        width:148px;

        gap:6px;

        padding:14px 14px 16px;

    }

    .vitrine-image{

        height:115px;

        margin:-14px -14px 2px;

    }

    .vitrine-tag{

        top:8px;
        left:8px;

        padding:3px 9px;

        font-size:.62rem;

    }

    .vitrine-title{

        display:-webkit-box;

        -webkit-line-clamp:2;

        line-clamp:2;

        -webkit-box-orient:vertical;

        overflow:hidden;

        font-size:.8rem;

        line-height:1.3;

    }

    /* Some — numa tela pequena, título + imagem já bastam */
    .vitrine-desc{

        display:none;

    }

}

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

    .vitrines-track{

        animation:none;

    }

}