/* =========================
   Produtos — Cards Relacionados
   ========================= */

/* wrapper da seção */
.related-products{
    margin-top: 32px;
}

.related-title{
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    color: #111111;
}

/* ===== Card ===== */
.prod-card{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #FFFFFF;
    border: 1px solid #E2E4E6;
    border-radius: 6px;
    padding: 14px;
    height: 100%;
}

/* coluna esquerda: thumb + comparar */
.prod-card__left{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.prod-card__left span{
    color: #01001C;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

/* thumb */
.prod-card__thumb{
    width: 92px;
    min-width: 92px;
    height: 74px;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.prod-card__thumb img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.prod-card__ph{
    font-size: 11px;
    color: #9CA3AF;
}

/* comparar (fica abaixo da imagem) */
.prod-card__compare{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #374151;
    margin-top: 40%;
}

.prod-card__compare .form-check-input{
    width: 16px;
    height: 16px;
    margin: 0;
}

/* coluna direita: meta + título + botão */
.prod-card__body{
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

/* meta (marca + ref) */
.prod-card__meta{
    display: flex;
    align-items: center;
    gap: 10px;
}

.prod-card__brand{
    display: inline-block;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    color: #111111;
    padding: 3px 6px;
    border-radius: 3px;
    letter-spacing: .3px;
}

.prod-card__ref{
    color: #73757B;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
}

/* título (duas linhas) */
.prod-card__title{
    margin: 2px 0 6px 0;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    line-height: 1.25;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2);
}

/* botão “Ver Detalhes” embaixo do título */
.btn-details{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bs-blue);
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 0;
    width: 61%;
    border: 1px solid transparent;
}

.btn-details:hover{
    filter: brightness(.95);
    color: #FFFFFF;
}

.btn-details .plus{
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 3px;
}

/* responsivo */
@media (max-width: 576px){
    .prod-card{
        padding: 12px;
    }
    .prod-card__thumb{
        width: 84px;
        min-width: 84px;
        height: 68px;
    }
}

/* ===== Card V2 (layout do print) ===== */
.prod-card.v2{
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E2E4E6;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.prod-card.v2:hover{
    border-color: #D7DBDF;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* mídia no topo (proporção consistente) */
.prod-card.v2 .pc-media{
    display: block;
    background: #F7F8FA;
    border-bottom: 1px solid #EEF0F2;
    position: relative;
    aspect-ratio: 4 / 3;  /* ajuste se quiser 16/9 */
}
.prod-card.v2 .pc-media img{
    width: 100%;
    height: 100%;
    object-fit: contain;   /* igual ao print (produto “solto”) */
    display: block;
}
.prod-card.v2 .pc-media .pc-ph{
    display:flex; align-items:center; justify-content:center;
    color:#9CA3AF; font-size:12px; height:100%;
}

/* conteúdo */
.prod-card.v2 .pc-body{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 0 14px;
    flex: 1 1 auto;      /* empurra o rodapé para baixo */
}

/* link azul da categoria */
.prod-card.v2 .pc-cat{
    color: #4CA7E0;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}
.prod-card.v2 .pc-cat:hover{ text-decoration: underline; }

/* título forte (duas linhas no máx) */
.prod-card.v2 .pc-title{
    color: #1F1F20;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.25em * 2);
}
.prod-card.v2 .pc-title:hover{ text-decoration: underline; }

/* meta (duas linhas pequenas) */
.prod-card.v2 .pc-meta{
    margin-top: 2px;
    color: #6B7280;
    font-size: 12px;
    line-height: 1.25;
}
.prod-card.v2 .pc-meta span{ color: #374151; }

/* rodapé fixo no fundo do card */
.prod-card.v2 .pc-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 14px;
}

/* comparar (checkbox + label) */
.prod-card.v2 .pc-compare{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #111;
    font-size: 14px;
    margin: 0;            /* zera margin herdada de form-check */
    cursor: pointer;
}
.prod-card.v2 .pc-compare .form-check-input{
    width: 18px; height: 18px; margin: 0;
    border-radius: 4px;
}

/* coração (favorito) à direita */
.prod-card.v2 .pc-like{
    width: 34px; height: 34px;
    border: 1px solid transparent;
    background: #fff;
    border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.prod-card.v2 .pc-like:hover{
    background: #F8FAFC;
    border-color: #DDE1E6;
}
.prod-card.v2 .pc-like.is-active svg path{
    fill: #2D39F5; stroke: #2D39F5;
}

/* responsivo (opcional) */
@media (max-width: 576px){
    .prod-card.v2 .pc-body{ padding: 10px 12px 0; }
    .prod-card.v2 .pc-footer{ padding: 10px 12px 12px; }
}

/* defina uma proporção e uma altura mínima confortáveis */
:root{
    --pc-aspect: 4/3;      /* 4:3 funciona bem para produto */
    --pc-min-h: 234px;     /* garante no mínimo ~190px */
}

/* Área da mídia (topo do card) SEMPRE com a mesma altura */
.prod-card.v2 .pc-media{
    aspect-ratio: var(--pc-aspect);
    min-height: var(--pc-min-h);
    background: #F7F8FA;
    border-bottom: 1px solid #EEF0F2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
.list-detalhe .prod-card.v2 .pc-media{
    min-height: 266px!important;
}


/* Placeholder “Sem imagem” maior e centralizado */
.prod-card.v2 .pc-media .pc-ph{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-size: 14px;
    font-weight: 600;
    background: #F1F3F5;
    border: 1px dashed #D7DBE0;
    border-radius: 6px;
}

/* Fallback para navegadores sem aspect-ratio (ex.: Safari antigo) */
@supports not (aspect-ratio: 1 / 1){
    .prod-card.v2 .pc-media{ position: relative; }
    .prod-card.v2 .pc-media::before{
        content: "";
        display: block;
        /* 4:3 => 75% da largura vira a altura */
        padding-top: 75%;
    }
    .prod-card.v2 .pc-media > *{ position: absolute; inset: 0; }
}

/* Garante o rodapé colado no fundo e cards com mesma altura total */
.prod-card.v2{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.prod-card.v2 .pc-body{ flex: 1 1 auto; }
.prod-card.v2 .pc-footer{ margin-top: auto; }

/* (opcional) pequenos ajustes responsivos */
@media (max-width: 576px){
    :root{ --pc-min-h: 160px; }
}

.pc-footer{
    display:flex;
    align-items:center;
    width:100%;
}
.pc-like{ margin-left:auto; }   /* empurra o coração pra direita */