/*
 * Brand-picker logo cards (desktop twin of mobile/group/brandPicker.css).
 * Shared by module/computer/group/brandPicker.phtml — the consumable
 * category hub (/consumiveis/{category}/ with no brand chosen) + the
 * /consumiveis/ landing. Covers ONLY the "Marcas populares" / "Outras
 * marcas" logo tiers — "Todas as marcas" stays a plain text index.
 *
 * Dedicated stylesheet + own <link> (rather than living in
 * computer/components/group.css): that file is linked before the
 * landing/gate early-returns on the MOBILE twin, so a shared file would
 * silently no-op there. Kept as a matching pair on both devices for
 * consistency even though desktop's group.css link happens to sit
 * earlier in module/computer/group/group.phtml.
 *
 * html[data-device="computer"] runs on the 10px-base rem trick (see
 * tokens.css) — this file uses literal px throughout to avoid that trap.
 */

.brandPickerCard{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 12px;
    background: var(--lb-card);
    border: 1px solid var(--lb-border);
    border-radius: 6px;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.brandPickerCard img{
    max-width: 100%;
    max-height: 34px;
    width: auto;
    height: auto;
}

/* :focus-visible always applies (keyboard). :hover is gated behind a real
 * pointer so a tap on a touch device doesn't leave the card "stuck" lifted. */
.brandPickerCard:focus-visible{
    border-color: var(--lb-brand);
    box-shadow: var(--lb-shadow);
    transform: translateY(-2px);
}

@media (hover: hover){
    .brandPickerCard:hover{
        border-color: var(--lb-brand);
        box-shadow: var(--lb-shadow);
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce){
    .brandPickerCard{
        transition: none;
    }
    .brandPickerCard:hover,
    .brandPickerCard:focus-visible{
        transform: none;
    }
}