/* =========================================================
   VITRINE DA BOUTIQUE — seção institucional (index.html)
   Usa os tokens/classes institucionais já existentes em
   style.css (--gold, --card-bg, .haircut, .haircuts etc.).
   Não carrega tokens-loja.css — identidade escura/dourada.
========================================================= */

#vitrine-boutique {
    padding: 70px 5% 60px;
    text-align: center;
}

#vitrine-boutique .vitrine-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

#vitrine-boutique h2 {
    font-size: 2.1rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

#vitrine-boutique .vitrine-subtitle {
    max-width: 620px;
    margin: 0 auto 34px;
    color: var(--text-secondary);
    line-height: 1.7;
}

#vitrine-boutique .vitrine-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 34px;
}

#vitrine-boutique .vitrine-card {
    flex: 1 1 220px;
    max-width: 240px;
}

#vitrine-boutique .vitrine-preco {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.95rem;
}

#vitrine-boutique .vitrine-badge-estoque {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px 10px;
}

#vitrine-boutique .vitrine-card.is-indisponivel .service-img {
    filter: grayscale(60%);
    opacity: 0.7;
}

#vitrine-boutique .vitrine-skeleton {
    flex: 1 1 220px;
    max-width: 240px;
    height: 270px;
    border-radius: 24px;
    background: linear-gradient(90deg, var(--card-bg) 25%, var(--bg-light) 37%, var(--card-bg) 63%);
    background-size: 400% 100%;
    animation: vitrine-shimmer 1.4s ease infinite;
}

@keyframes vitrine-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

#vitrine-boutique .vitrine-estado {
    color: var(--text-secondary);
    padding: 20px 0;
}

@media (prefers-reduced-motion: reduce) {
    #vitrine-boutique .vitrine-skeleton {
        animation: none;
    }
}

@media (max-width: 768px) {
    #vitrine-boutique {
        padding: 50px 5% 40px;
    }

    #vitrine-boutique h2 {
        font-size: 1.7rem;
    }
}