/**
 * CatalogoV3 (referência AllBirds) — comportamento do card em CSS PURO.
 *
 * Por que CSS puro (e não utilitários Tailwind no template): o efeito depende de
 * variantes hover/arbitrárias que só existem se o `npm run build` do tema as capturar
 * — frágil. Aqui o comportamento é garantido independentemente do build, no mesmo
 * padrão das Fases 1/2. Escopo `.m2c-card-v3` → só afeta o preset V3.
 *
 * Efeito (validado pelo cliente):
 *  - O conteúdo revelado (cores + botão "Ver produto") vive num PAINEL FLUTUANTE
 *    `.m2c-card-v3-reveal` em `position:absolute` (top:100%). Como ele NÃO faz parte
 *    do fluxo, a altura dos cards vizinhos NÃO muda — só o card em hover "flutua".
 *  - Desktop (≥768px): card limpo (img/nome/preço); no hover o card escala+sombra e o
 *    painel desce sobre o card de baixo, mostrando cores + botão.
 *  - Mobile (<768px): cores SEMPRE visíveis (painel em fluxo normal); botão oculto.
 *
 * O painel só é renderizado quando o produto tem swatch (configurável) — produto
 * simples não recebe `.m2c-card-v3-reveal` (decisão do cliente). Ver item-v3.phtml.
 */

/* ---- Swatch nativo da listagem: compactar (vinha como faixa larga com borda) ---- */
.m2c-card-v3 .m2c-card-v3-swatches .swatch-attribute {
    border: 0 !important;
}
.m2c-card-v3 .m2c-card-v3-swatches .swatch-attribute-options {
    min-height: 0 !important;
}
.m2c-card-v3 .m2c-card-v3-swatches .swatch-attribute-options > div {
    padding-block: 0 !important;
    gap: .375rem;
}
.m2c-card-v3 .m2c-card-v3-swatches .swatch-option {
    width: 1.5rem;
    height: 1.5rem;
    min-width: 0;
    border-radius: 9999px;
    margin: 0 !important;
}

/* Botão "Ver produto": oculto por padrão → no MOBILE fica sempre oculto (só cores). */
.m2c-card-v3 .m2c-card-v3-cta {
    display: none;
}

/* ---- DESKTOP: painel flutuante revelado no hover ---- */
@media (min-width: 768px) {
    .m2c-card-v3 {
        transition: transform .3s ease, box-shadow .3s ease;
    }

    /* Painel fora do fluxo: não altera a altura de ninguém; desce sobre o card de baixo. */
    .m2c-card-v3 .m2c-card-v3-reveal {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: .25rem .75rem .75rem;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        box-shadow: 0 .85rem 1rem rgba(0, 0, 0, .15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-.25rem);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
        z-index: 30;
        pointer-events: none;
    }

    /* No desktop o botão "Ver produto" volta (dentro do painel). */
    .m2c-card-v3 .m2c-card-v3-cta {
        display: block;
    }

    .m2c-card-v3:hover {
        transform: scale(1.03);
        box-shadow: 0 .85rem 1.5rem rgba(0, 0, 0, .15);
        z-index: 20;
    }
    .m2c-card-v3:hover .m2c-card-v3-reveal {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}