/* ============================================================================
   Porto di Vino — Card de produto (1a Editorial) + página de listagem/busca
   Porte fiel do handoff "Card de Produto - Refatoração" (Manual de Marca 2024).

   Markup PORTÁVEL: nenhuma regra depende de ViewState, de <table> do Web Forms
   nem de classes do Bootstrap. Ao migrar a vitrine para .NET 10, este arquivo
   e o HTML que ele estiliza vão junto sem alteração.

   Namespace .pdv-* — não colide com o card antigo (.busca-container .produto),
   que segue vivo em site.css para as telas ainda não migradas.
   ========================================================================= */

/* ---------------------------------------------------------------- Fontes  */
/* site.css declara uma família por peso ('montserrat-bold' etc.), o que não
   permite escrever `font: 600 14px/1 Montserrat`. Aqui a mesma família ganha
   os pesos numéricos que o design usa. Os .ttf já existem em /font. */
@font-face {
    font-family: 'MontserratPDV';
    src: url('/font/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratPDV';
    src: url('/font/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratPDV';
    src: url('/font/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

/* Não há SemiBold licenciado em /font: 600 usa o Bold, como no restante do site. */
@font-face {
    font-family: 'MontserratPDV';
    src: url('/font/Montserrat-Bold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratPDV';
    src: url('/font/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'MontserratPDV';
    src: url('/font/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

/* ---------------------------------------------------------------- Tokens  */
:root {
    /* Marca */
    --pdv-cornell: #B31B1B;
    --pdv-cornell-hover: #9A1717;
    --pdv-bordeaux: #7C1212;
    --pdv-rojo: #E60026;
    --pdv-mikado: #FFC40C;
    --pdv-alabaster: #F2F0E6;
    --pdv-night: #0D0D0D;
    --pdv-amber: #E5832B;
    /* Neutros quentes */
    --pdv-n900: #1A1917;
    --pdv-n800: #2B2926;
    --pdv-n700: #44413C;
    --pdv-n600: #6B665E;
    --pdv-n500: #918B80;
    --pdv-n400: #B8B2A6;
    --pdv-n300: #D8D3C7;
    --pdv-n200: #E9E5DA;
    --pdv-n100: #F2F0E6;
    --pdv-branco: #FFFFFF;
    /* Superfícies auxiliares */
    --pdv-foto-bg: #F5F2E7;
    --pdv-foto-bg-esgotado: #EFEDE3;
    --pdv-borda-leve: #E4E0D2;
    --pdv-borda-fav: #E4DFCE;
    /* Selo Clube (ouro) */
    --pdv-clube-bg: #FDF6E0;
    --pdv-clube-borda: #F2E3B4;
    --pdv-clube-ink: #6B4A00;
    --pdv-clube-icone: #B08400;
    /* Selo promoção */
    --pdv-promo-bg: #F6EDEC;
    --pdv-promo-borda: #EBDBD9;
    /* Badge soft primary */
    --pdv-soft-primary-bg: #F6E1E1;
    /* Tipografia */
    --pdv-font-sans: 'MontserratPDV', 'montserrat-regular', system-ui, sans-serif;
    --pdv-font-editorial: 'Playfair Display', Georgia, 'Times New Roman', serif;
    /* Raios */
    --pdv-raio-card: 14px;
    --pdv-raio-barra: 12px;
    --pdv-raio-input: 8px;
    --pdv-raio-pill: 999px;
    /* Sombras */
    --pdv-sombra-card: 0 1px 2px rgba(13,13,13,.04), 0 10px 28px -16px rgba(13,13,13,.22);
    --pdv-sombra-card-hover: 0 2px 4px rgba(13,13,13,.05), 0 18px 34px -18px rgba(13,13,13,.28);
    --pdv-sombra-foto: drop-shadow(0 12px 16px rgba(13,13,13,.16));
}

/* ============================================================== GRADE ==== */
.pdv-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    /* `stretch` (padrão) e não `start`: todo card da linha nasce com a MESMA
       altura, independente do tamanho do nome ou de o preço quebrar. A sobra
       vai para dentro do corpo, que empurra a ação para o rodapé. */
    align-items: stretch;
}

@media (max-width: 1199px) {
    .pdv-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .pdv-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 599px) {
    .pdv-grade {
        gap: 14px 12px;
    }
}

/* =============================================================== CARD ==== */
.pdv-card {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--pdv-branco);
    border: 1px solid var(--pdv-n300);
    border-radius: var(--pdv-raio-card);
    overflow: hidden;
    box-shadow: var(--pdv-sombra-card);
    font-family: var(--pdv-font-sans);
    color: var(--pdv-night);
    text-align: left;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

    .pdv-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--pdv-sombra-card-hover);
    }

/* Item já no carrinho: borda Cornell por inset, para não mudar a altura. */
.pdv-card.is-no-carrinho {
    border-color: var(--pdv-cornell);
    box-shadow: inset 0 0 0 1px var(--pdv-cornell), var(--pdv-sombra-card);
}

.pdv-card.is-esgotado {
    border-color: var(--pdv-borda-leve);
    box-shadow: none;
}

    .pdv-card.is-esgotado:hover {
        transform: none;
        box-shadow: none;
    }

/* ------------------------------------------------------------ Foto 1:1  */
.pdv-card__foto {
    position: relative;
    aspect-ratio: 1 / 1;
    /* O card é um flex column, então esta div é item de flex e herda
       min-height: auto — o mínimo automático seria a altura natural da garrafa
       (1071px), que vence o aspect-ratio e estica o card. Zerar o mínimo (e não
       deixar o item crescer/encolher) é o que mantém o quadrado. */
    min-height: 0;
    flex: 0 0 auto;
    background: var(--pdv-foto-bg);
    display: grid;
    place-items: center;
    /* A garrafa nunca pode invadir o corpo do card, nem no zoom de hover. */
    overflow: hidden;
    cursor: pointer;
}

/* A foto e o nome são links para o produto: neutraliza a cor/sublinhado que
   site.css aplica a <a> em geral. */
.pdv-card a {
    color: inherit;
    text-decoration: none;
}

    .pdv-card a:hover {
        color: inherit;
        text-decoration: none;
    }

/* O link precisa ficar FORA do fluxo do grid. Como item de grid com
   `place-items: center` a linha é dimensionada pelo conteúdo, e aí o
   `height: 100%` do <a> vira cíclico: o navegador resolve como `auto`, a linha
   cresce até a altura natural da garrafa (1071px) e a foto vaza por cima do
   preço e do botão. Absoluto com as quatro âncoras, a altura é definida e o
   `height: 100%` da <img> resolve contra o quadrado. */
.pdv-card__foto > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
}

/* Fallback para navegadores sem aspect-ratio (padding-bottom hack). */
@supports not (aspect-ratio: 1 / 1) {
    .pdv-card__foto {
        height: 0;
        padding-bottom: 100%;
    }
}

.pdv-card__img {
    width: 100%;
    height: 100%;
    /* A foto quadrada oficial (1200×1200) ainda está em produção: a vertical
       atual entra centralizada com `contain`, sem corte. */
    object-fit: contain;
    padding: 11%;
    filter: var(--pdv-sombra-foto);
    transition: transform 220ms ease-out;
}

.pdv-card:hover .pdv-card__img {
    transform: scale(1.03);
}

.pdv-card.is-esgotado .pdv-card__foto {
    background: var(--pdv-foto-bg-esgotado);
}

.pdv-card.is-esgotado .pdv-card__img {
    opacity: .42;
    filter: grayscale(1);
}

/* ------------------------------------------------------ Selo (canto SE)  */
.pdv-selo {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--pdv-raio-pill);
    font: 600 11px/1 var(--pdv-font-sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    max-width: calc(100% - 60px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdv-selo--tipo {
    background: var(--pdv-soft-primary-bg);
    color: var(--pdv-bordeaux);
}

.pdv-selo--promo {
    background: var(--pdv-rojo);
    color: var(--pdv-branco);
}

.pdv-selo--esgotado {
    background: var(--pdv-n200);
    color: var(--pdv-n800);
}

.pdv-selo--socio {
    background: var(--pdv-mikado);
    color: var(--pdv-night);
}

/* Promoção exclusiva de sócio (Proposta 03c): pill Night com "+" Mikado.
   Aparece para todo mundo — é o gancho de venda da assinatura. */
.pdv-selo--socio-extra {
    gap: 5px;
    background: var(--pdv-night);
    color: var(--pdv-mikado);
}

    .pdv-selo--socio-extra svg {
        flex: none;
    }

/* --------------------------------------------------------- Favorito     */
.pdv-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--pdv-raio-pill);
    background: rgba(255,255,255,.92);
    border: 1.5px solid var(--pdv-borda-fav);
    color: var(--pdv-n600);
    cursor: pointer;
    transition: transform 140ms ease-out, color 140ms ease-out;
}

    .pdv-fav:active {
        transform: scale(.92);
    }

    .pdv-fav.is-ativo {
        color: var(--pdv-cornell);
    }

        .pdv-fav.is-ativo svg {
            fill: var(--pdv-cornell);
        }

/* ------------------------------------------------------------- Corpo    */
.pdv-card__corpo {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Ocupa toda a altura que sobrar do card esticado pela grade. */
    flex: 1 1 auto;
}

.pdv-card__eyebrow {
    font: 600 10px/1 var(--pdv-font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pdv-n500);
    min-height: 10px;
    /* País · Uva · Safra cabe em 1 linha; se estourar, corta sem quebrar o card. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdv-card.is-esgotado .pdv-card__eyebrow {
    color: var(--pdv-n400);
}

.pdv-card__nome {
    margin: 0;
    font: 600 14.5px/1.32 var(--pdv-font-sans);
    color: var(--pdv-night);
    min-height: 38px;
    /* Nunca truncar em 1 linha — o nome tem direito a duas. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
}

.pdv-card.is-esgotado .pdv-card__nome {
    color: var(--pdv-n600);
}

/* -------------------------------------------------------------- Preços  */
.pdv-precos {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* A altura é reservada para DUAS linhas de propósito. A largura do card (≈135px
   úteis com 4-5 colunas) não comporta "R$ 496,80" + "750 ml" lado a lado, então
   preços de 3 dígitos quebram o sufixo (ou o preço antigo, na promoção) para
   baixo. Reservando a quebra, o card com preço curto e o com preço longo têm o
   mesmo bloco de preço — a faixa Clube e o botão ficam na mesma altura em toda
   a linha. Trocar 24px do preço obriga a recalcular este valor. */
.pdv-precos__linha {
    display: flex;
    align-items: baseline;
    align-content: flex-start;
    gap: 7px;
    flex-wrap: wrap;
    min-height: 42px;
}

.pdv-preco {
    font: 700 24px/1 var(--pdv-font-sans);
    letter-spacing: -.015em;
    color: var(--pdv-night);
}

.pdv-preco--promo {
    color: var(--pdv-cornell);
}

.pdv-card.is-esgotado .pdv-preco {
    color: var(--pdv-n500);
}

.pdv-preco__sufixo {
    font: 400 11px/1 var(--pdv-font-sans);
    color: var(--pdv-n500);
}

.pdv-preco__antigo {
    font: 400 12px/1 var(--pdv-font-sans);
    color: var(--pdv-n500);
    text-decoration: line-through;
}

/* Linha secundária — sempre presente, em uma das variantes. */
.pdv-faixa-preco {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: var(--pdv-raio-input);
    min-height: 30px;
    /* Item de flex column: sem isto o mínimo automático vence a largura do
       card e a faixa vaza sobre a borda quando o conteúdo não cabe. */
    min-width: 0;
}

/* O rótulo é o único elemento que encolhe: chip e valor têm largura fixa.
   Em card estreito ele corta com reticências em vez de empurrar a faixa. */
.pdv-faixa-preco__label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdv-faixa-preco__valor {
    flex: none;
    margin-left: auto;
    white-space: nowrap;
}

.pdv-faixa-preco--clube {
    background: var(--pdv-clube-bg);
    border: 1px solid var(--pdv-clube-borda);
}

    .pdv-faixa-preco--clube .pdv-faixa-preco__label {
        font: 600 11.5px/1 var(--pdv-font-sans);
        color: var(--pdv-clube-ink);
    }

    .pdv-faixa-preco--clube .pdv-faixa-preco__valor {
        font: 700 13px/1 var(--pdv-font-sans);
        color: var(--pdv-night);
    }

.pdv-faixa-preco--promo {
    background: var(--pdv-promo-bg);
    border: 1px solid var(--pdv-promo-borda);
}

    .pdv-faixa-preco--promo .pdv-faixa-preco__label {
        font: 600 11.5px/1 var(--pdv-font-sans);
        color: var(--pdv-bordeaux);
    }

    .pdv-faixa-preco--promo .pdv-faixa-preco__valor {
        font: 700 12px/1 var(--pdv-font-sans);
        color: var(--pdv-bordeaux);
    }

.pdv-faixa-preco--socio {
    background: var(--pdv-night);
}

    .pdv-faixa-preco--socio .pdv-faixa-preco__label {
        font: 600 11.5px/1 var(--pdv-font-sans);
        color: var(--pdv-n200);
    }

    .pdv-faixa-preco--socio .pdv-faixa-preco__valor {
        font: 700 12px/1 var(--pdv-font-sans);
        color: var(--pdv-mikado);
    }

/* Chip −N% dentro das faixas (Oferta sócio e Clube). Mikado sobre Night
   contrasta tanto no fundo preto da faixa de sócio quanto no bege do Clube. */
.pdv-faixa-preco__chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 3px 6px;
    border-radius: var(--pdv-raio-pill);
    background: var(--pdv-mikado);
    color: var(--pdv-night);
    font: 700 10px/1 var(--pdv-font-sans);
    white-space: nowrap;
}

.pdv-faixa-preco--esgotado {
    background: var(--pdv-n100);
    border: 1px solid var(--pdv-borda-leve);
}

    .pdv-faixa-preco--esgotado .pdv-faixa-preco__label {
        font: 500 11.5px/1 var(--pdv-font-sans);
        color: var(--pdv-n600);
    }

/* --------------------------------------------------------------- Ação   */
/* min-height fixo garante que cards com e sem stepper tenham a mesma altura;
   margin-top: auto cola a ação no rodapé do card, então os botões de uma linha
   ficam todos alinhados mesmo que algum card tenha conteúdo a mais. */
.pdv-card__acao {
    min-height: 44px;
    margin-top: auto;
    display: flex;
    align-items: center;
}

.pdv-btn {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--pdv-raio-pill);
    border: 1.5px solid var(--pdv-cornell);
    background: var(--pdv-cornell);
    color: var(--pdv-alabaster);
    font: 600 14px/1 var(--pdv-font-sans);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background 140ms ease-out, transform 140ms ease-out;
}

    .pdv-btn:hover {
        background: var(--pdv-cornell-hover);
        border-color: var(--pdv-cornell-hover);
        color: var(--pdv-alabaster);
    }

    .pdv-btn:active {
        transform: translateY(1px);
    }

.pdv-btn--ghost {
    background: transparent;
    border-color: var(--pdv-n400);
    color: var(--pdv-n700);
}

    .pdv-btn--ghost:hover {
        background: var(--pdv-n100);
        border-color: var(--pdv-n400);
        color: var(--pdv-n700);
    }

.pdv-btn--outline {
    width: auto;
    background: var(--pdv-branco);
    border-color: var(--pdv-n300);
    color: var(--pdv-night);
}

    .pdv-btn--outline:hover {
        background: var(--pdv-n100);
        border-color: var(--pdv-n400);
        color: var(--pdv-night);
    }

/* ------------------------------------------------------------ Stepper   */
/* Aparece no lugar do botão depois de adicionar — sem recarregar a lista. */
.pdv-stepper {
    width: 100%;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 3px;
    border-radius: var(--pdv-raio-pill);
    border: 1.5px solid var(--pdv-cornell);
}

.pdv-card.is-no-carrinho .pdv-stepper {
    display: flex;
}

.pdv-card.is-no-carrinho .pdv-btn--adicionar {
    display: none;
}

.pdv-stepper__texto {
    flex: 1;
    text-align: center;
    font: 600 13px/1 var(--pdv-font-sans);
    color: var(--pdv-night);
}

.pdv-icon-btn {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--pdv-raio-pill);
    cursor: pointer;
    transition: transform 140ms ease-out;
}

    .pdv-icon-btn:active {
        transform: scale(.92);
    }

.pdv-icon-btn--menos {
    background: var(--pdv-promo-bg);
    color: var(--pdv-cornell);
}

.pdv-icon-btn--mais {
    background: var(--pdv-cornell);
    color: var(--pdv-alabaster);
}

/* ------------------------------------------------- Modos especiais      */
/* Hotsite / avaliação reaproveitam o card mas trocam a ação. */
.pdv-card__legenda {
    font: 400 12px/1.45 var(--pdv-font-sans);
    color: var(--pdv-n600);
}

.pdv-card__avaliar {
    font: 600 12.5px/1 var(--pdv-font-sans);
    color: var(--pdv-cornell);
    text-decoration: none;
}

    .pdv-card__avaliar:hover {
        text-decoration: underline;
    }

.pdv-card__estrelas {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--pdv-mikado);
    font-size: 14px;
}

/* ------------------------------------------------ Variante mobile        */
/* <600px o card mantém a moldura (pedido do usuário 24/08 — a compacta 1b
   sem borda foi descartada); só encolhem tipografia e espaçamentos. */
@media (max-width: 599px) {
    .pdv-card:hover {
        transform: none;
        box-shadow: var(--pdv-sombra-card);
    }

    .pdv-card__corpo {
        padding: 12px 12px 14px;
        gap: 8px;
    }

    .pdv-card__nome {
        font-size: 13.5px;
        min-height: 36px;
    }

    .pdv-preco {
        font-size: 20px;
    }

    /* Preço menor aqui, então a reserva da quebra também encolhe. */
    .pdv-precos__linha {
        min-height: 38px;
    }

    .pdv-fav {
        display: none;
    }
}

/* ====================================================== PÁGINA DE BUSCA = */
.pdv-busca {
    font-family: var(--pdv-font-sans);
    color: var(--pdv-night);
}

/* ---------------------------------------------------- Cabeçalho da tela  */
.pdv-busca__cabecalho {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 16px;
}

.pdv-busca__breadcrumb {
    font: 500 11px/1 var(--pdv-font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pdv-n500);
}

.pdv-busca__titulo {
    margin: 0;
    font: 500 36px/1.1 var(--pdv-font-editorial);
    color: var(--pdv-night);
}

.pdv-busca__subtitulo {
    margin: 0;
    font: 400 14px/1.5 var(--pdv-font-sans);
    color: var(--pdv-n600);
}

/* ------------------------------------------------- Barra de resultados   */
.pdv-barra {
    padding: 14px 18px;
    margin-bottom: 24px;
    background: var(--pdv-branco);
    border: 1px solid var(--pdv-n300);
    border-radius: var(--pdv-raio-barra);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pdv-barra__label {
    font: 600 11px/1 var(--pdv-font-sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pdv-n500);
}

.pdv-barra__selos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.pdv-barra__direita {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.pdv-barra__total {
    font: 400 12.5px/1 var(--pdv-font-sans);
    color: var(--pdv-n600);
    white-space: nowrap;
}

.pdv-barra__divisor {
    width: 1px;
    height: 20px;
    background: var(--pdv-borda-leve);
}

/* Selo removível de filtro aplicado */
.pdv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 0;
    border-radius: var(--pdv-raio-pill);
    background: var(--pdv-soft-primary-bg);
    color: var(--pdv-bordeaux);
    font: 600 11.5px/1 var(--pdv-font-sans);
    cursor: pointer;
}

    .pdv-chip:hover {
        background: #F0D2D2;
    }

.pdv-link {
    font: 600 12px/1 var(--pdv-font-sans);
    color: var(--pdv-n600);
    text-decoration: none;
    cursor: pointer;
}

    .pdv-link:hover {
        color: var(--pdv-night);
        text-decoration: underline;
    }

.pdv-link--primary {
    font-size: 11.5px;
    color: var(--pdv-cornell);
}

    .pdv-link--primary:hover {
        color: var(--pdv-bordeaux);
    }

/* Ordenação: <select> nativo estilizado como pill (mantém o postback). */
.pdv-ordenacao {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 9px 32px 9px 14px;
    border: 1.5px solid var(--pdv-n300);
    border-radius: var(--pdv-raio-pill);
    background-color: var(--pdv-branco);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%236B665E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    font: 600 12.5px/1 var(--pdv-font-sans);
    color: var(--pdv-night);
    cursor: pointer;
}

    .pdv-ordenacao:focus {
        outline: 0;
        border-color: var(--pdv-rojo);
        box-shadow: 0 0 0 3px rgba(230,0,38,.14);
    }

/* ------------------------------------------------------------ Corpo      */
.pdv-busca__corpo {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 28px;
    align-items: start;
    padding-bottom: 36px;
}

@media (max-width: 1199px) {
    .pdv-busca__corpo {
        grid-template-columns: 218px 1fr;
        gap: 20px;
    }
}

@media (max-width: 899px) {
    .pdv-busca__corpo {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ------------------------------------------------- Sidebar de filtros    */
.pdv-filtros {
    background: var(--pdv-branco);
    border: 1px solid var(--pdv-n300);
    border-radius: var(--pdv-raio-card);
    padding: 4px 18px 18px;
    position: sticky;
    top: 16px;
}

@media (max-width: 899px) {
    .pdv-filtros {
        position: static;
    }
}

.pdv-filtros__cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--pdv-n200);
}

.pdv-filtros__titulo {
    font: 600 12px/1 var(--pdv-font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdv-night);
}

.pdv-filtros__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--pdv-raio-pill);
    background: var(--pdv-cornell);
    color: var(--pdv-branco);
    font: 600 11px/1 var(--pdv-font-sans);
}

.pdv-filtros__grupo {
    padding: 16px 0;
    border-bottom: 1px solid var(--pdv-n200);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .pdv-filtros__grupo:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

.pdv-filtros__grupo-titulo {
    display: flex;
    align-items: center;
    font: 600 11px/1 var(--pdv-font-sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pdv-n700);
    cursor: pointer;
    user-select: none;
}

    .pdv-filtros__grupo-titulo svg {
        margin-left: auto;
        transition: transform 160ms ease-out;
    }

.pdv-filtros__grupo.is-fechado .pdv-filtros__grupo-titulo svg {
    transform: rotate(-90deg);
}

.pdv-filtros__grupo.is-fechado .pdv-filtros__conteudo {
    display: none;
}

.pdv-filtros__conteudo {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Web.config fixa controlRenderingCompatibilityVersion="3.5", então o
   CheckBoxList ignora RepeatLayout="UnorderedList" e rende sempre no formato
   legado: <span class="lista"><span><input><label></span><br />…</span>.
   A linha da opção é, portanto, o <span> filho — não um <li>. */
.pdv-filtros__lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    /* Os <br /> do layout legado sobram dentro do flex. */
    .pdv-filtros__lista br {
        display: none;
    }

    .pdv-filtros__lista > span {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
        /* área de toque confortável sem inflar o desktop */
        min-height: 26px;
    }

    .pdv-filtros__lista label {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        font: 400 14px/1.4 var(--pdv-font-sans);
        color: var(--pdv-n800);
        cursor: pointer;
        margin: 0;
    }

.pdv-filtros__lista input[type=checkbox],
.pdv-filtros__lista input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid var(--pdv-n400);
    border-radius: 4px;
    background: var(--pdv-branco);
    cursor: pointer;
    position: relative;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.pdv-filtros__lista input[type=radio] {
    border-radius: var(--pdv-raio-pill);
}

.pdv-filtros__lista input[type=checkbox]:checked,
.pdv-filtros__lista input[type=radio]:checked {
    background: var(--pdv-cornell);
    border-color: var(--pdv-cornell);
}

    .pdv-filtros__lista input[type=checkbox]:checked::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid var(--pdv-branco);
        border-width: 0 3.4px 3.4px 0;
        transform: rotate(45deg);
    }

    .pdv-filtros__lista input[type=radio]:checked::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 5px;
        width: 7px;
        height: 7px;
        border-radius: var(--pdv-raio-pill);
        background: var(--pdv-branco);
    }

.pdv-filtros__lista input:focus-visible {
    outline: 2px solid var(--pdv-rojo);
    outline-offset: 2px;
}

/* Contagem por opção, empurrada para a direita. */
.pdv-filtros__qtd {
    margin-left: auto;
    font: 400 11.5px/1 var(--pdv-font-sans);
    color: var(--pdv-n500);
}

/* Opção que zeraria o resultado: esmaecida, não sumida.
   No rendering legado os atributos do ListItem caem no <span> que envolve
   input+label, não no próprio input. */
.pdv-filtros__lista > span.is-vazio,
.pdv-faixas > span.is-vazio {
    opacity: .5;
}

/* Faixas de preço como selos.
   CheckBoxList com RepeatLayout="Flow" rende <input><label> lado a lado: o
   input some e o próprio <label> vira a pill, então o clique segue nativo
   (e o postback do filtro continua funcionando sem JS). */
.pdv-faixas {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

    .pdv-faixas input[type=checkbox] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .pdv-faixas label {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 7px 11px;
        border-radius: var(--pdv-raio-pill);
        border: 1px solid var(--pdv-n300);
        background: var(--pdv-branco);
        font: 500 11.5px/1 var(--pdv-font-sans);
        color: var(--pdv-n700);
        cursor: pointer;
        transition: background 120ms ease-out, border-color 120ms ease-out;
    }

        .pdv-faixas label:hover {
            border-color: var(--pdv-n400);
        }

    .pdv-faixas input[type=checkbox]:checked + label {
        border: 1.5px solid var(--pdv-cornell);
        background: var(--pdv-soft-primary-bg);
        color: var(--pdv-bordeaux);
        font-weight: 600;
    }

    .pdv-faixas input[type=checkbox]:focus-visible + label {
        outline: 2px solid var(--pdv-rojo);
        outline-offset: 2px;
    }

/* A contagem por faixa entra dentro da própria pill. */
.pdv-faixas .pdv-filtros__qtd {
    margin-left: 6px;
}

/* Busca interna de grupo (país/uva) e campo de busca do topo da lateral */
.pdv-input {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1.5px solid var(--pdv-n400);
    border-radius: var(--pdv-raio-input);
    background: var(--pdv-branco);
    font: 400 13px/1 var(--pdv-font-sans);
    color: var(--pdv-night);
}

    .pdv-input::placeholder {
        color: var(--pdv-n500);
    }

    .pdv-input:focus {
        outline: 0;
        border-color: var(--pdv-rojo);
        box-shadow: 0 0 0 3px rgba(230,0,38,.14);
    }

.pdv-busca-campo {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

    .pdv-busca-campo .pdv-input {
        height: 42px;
    }

    .pdv-busca-campo .pdv-btn {
        width: auto;
        min-height: 42px;
        padding: 0 18px;
        flex: none;
    }

/* Linha de opção escondida pela busca interna do grupo */
.pdv-filtros__lista > span.is-oculto {
    display: none;
}

/* ---------------------------------------------- Rodapé da grade          */
.pdv-rodape-grade {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
}

.pdv-rodape-grade__texto {
    font: 400 12.5px/1 var(--pdv-font-sans);
    color: var(--pdv-n600);
}

.pdv-progresso {
    width: 220px;
    height: 3px;
    border-radius: var(--pdv-raio-pill);
    background: var(--pdv-borda-leve);
    overflow: hidden;
}

    .pdv-progresso span {
        display: block;
        height: 100%;
        background: var(--pdv-cornell);
        transition: width 240ms ease-out;
    }

/* ---------------------------------------------------- Estado vazio       */
.pdv-vazio {
    background: var(--pdv-branco);
    border: 1px solid var(--pdv-n300);
    border-radius: var(--pdv-raio-card);
    padding: 40px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pdv-vazio__titulo {
    margin: 0;
    font: 500 22px/1.2 var(--pdv-font-editorial);
    color: var(--pdv-night);
}

.pdv-vazio__texto {
    margin: 0;
    font: 400 13.5px/1.5 var(--pdv-font-sans);
    color: var(--pdv-n600);
    max-width: 420px;
}

/* ------------------------------------------- Gaveta de filtros (mobile)  */
.pdv-filtros-toggle {
    display: none;
    width: 100%;
    min-height: 44px;
    margin-bottom: 16px;
}

@media (max-width: 899px) {
    .pdv-filtros-toggle {
        display: inline-flex;
    }

    .pdv-filtros-wrap {
        display: none;
    }

        .pdv-filtros-wrap.is-aberta {
            display: block;
        }
}

/* --------------------------------------------------------- Compliance    */
.pdv-compliance {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--pdv-borda-leve);
    text-align: center;
    font: 500 11.5px/1.5 var(--pdv-font-sans);
    letter-spacing: .04em;
    color: var(--pdv-n600);
}

/* -------------------------------------------------- Skeleton de carga    */
.pdv-card--skeleton .pdv-card__foto {
    background: var(--pdv-foto-bg-esgotado);
}

.pdv-card--skeleton .pdv-card__nome,
.pdv-card--skeleton .pdv-card__eyebrow {
    background: var(--pdv-n200);
    border-radius: 4px;
    color: transparent;
}

/* --------------------------------------------------- Redução de motion   */
@media (prefers-reduced-motion: reduce) {
    .pdv-card,
    .pdv-card__img,
    .pdv-btn,
    .pdv-icon-btn,
    .pdv-fav,
    .pdv-progresso span {
        transition: none;
    }

        .pdv-card:hover {
            transform: none;
        }

        .pdv-card:hover .pdv-card__img {
            transform: none;
        }
}