/* Modelos do cartão de produto do catálogo público (Client::CARTOES).
   Cada modelo muda só o cartão com data-cartao="<modelo>": o 'classico' não tem regra aqui e segue o CSS da página.
   O mesmo arquivo alimenta a prévia fictícia do painel (.cartao-mock), por isso a base abaixo é mínima e só vale dentro dela. */

/* ---- Base da prévia do painel (não afeta a página do catálogo) ---- */
.cartao-mock {
    --surface: #f4f2ee; --line: #e4e1db; --text: #1e1d1b; --muted: #7d7a73;
    --primary: #1e1d1b; --button-bg: #1e1d1b; --button-text: #fff;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start;
}
.cartao-mock.is-mini { grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) {
    .cartao-mock:not(.is-mini) { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
}
.cartao-mock .card { position: relative; box-sizing: border-box; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; }
.cartao-mock .card-image { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #e9e4dc; }
.cartao-mock .cm-img { width: 100%; height: 100%; display: grid; place-items: center; }
.cartao-mock .cm-img svg { width: 42%; height: auto; color: rgba(30, 29, 27, .22); }
.cartao-mock .card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 10px 11px 11px; }
.cartao-mock .card-category { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cartao-mock .card-title { margin: 0; font-size: 12.5px; font-weight: 800; line-height: 1.25; color: var(--text); }
.cartao-mock .card-desc { margin: 0; font-size: 11px; line-height: 1.35; color: var(--muted); }
.cartao-mock .card-swatches { display: flex; gap: 5px; min-height: 14px; }
.cartao-mock .sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.cartao-mock .card-prices { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.cartao-mock .price-now { font-size: 14px; font-weight: 900; color: var(--text); }
.cartao-mock .price-was { font-size: 11px; color: var(--muted); text-decoration: line-through; }
.cartao-mock .card-actions { display: flex; margin-top: 4px; }
.cartao-mock .btn-wa { flex: 1; display: flex; align-items: center; justify-content: center; padding: 7px 6px; border-radius: 10px; font-size: 10.5px; font-weight: 800; background: var(--button-bg); color: var(--button-text); }
.cartao-mock .badge-sale { position: absolute; top: 8px; left: 8px; background: var(--primary); color: #fff; font-size: 8.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; }

/* ---- Modelos (valem na página do catálogo e na prévia) ---- */

/* Só a foto: foto grande, nome e preço embaixo, sem caixa. */
.card[data-cartao="vitrine"] { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.card[data-cartao="vitrine"]:hover { transform: none; box-shadow: none; }
.card[data-cartao="vitrine"] .card-image { aspect-ratio: 4 / 5; border-radius: 14px; background: var(--surface); }
.card[data-cartao="vitrine"] .card-body { padding: 9px 2px 0; gap: 3px; }
.card[data-cartao="vitrine"] .card-title { font-size: 13px; font-weight: 600; }
.card[data-cartao="vitrine"] .price-now { font-size: 15px; }
.card[data-cartao="vitrine"] :is(.card-category, .card-brand, .card-desc, .card-rating) { display: none; }

/* Moda com cores: retrato 3:4 sem borda, bolinhas de cor maiores. */
.card[data-cartao="moda"] { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.card[data-cartao="moda"]:hover { transform: none; box-shadow: none; }
.card[data-cartao="moda"] .card-image { aspect-ratio: 3 / 4; border-radius: 8px; background: var(--surface); }
.card[data-cartao="moda"] .card-body { padding: 10px 1px 0; gap: 4px; }
.card[data-cartao="moda"] .card-swatches { gap: 7px; min-height: 20px; }
.card[data-cartao="moda"] .sw { width: 20px; height: 20px; }
.card[data-cartao="moda"] .card-title { font-size: 13px; font-weight: 600; }
.card[data-cartao="moda"] .price-now { font-size: 15px; }
.card[data-cartao="moda"] :is(.card-category, .card-brand, .card-desc, .card-rating) { display: none; }

/* Nome sobre a foto: foto cheia, nome e preço em faixa escura por cima da base da imagem. */
.card[data-cartao="sobreposto"] { position: relative; border: 0; border-radius: 18px; background: #111; color: #fff; box-shadow: none; }
.card[data-cartao="sobreposto"]:hover { transform: none; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); }
.card[data-cartao="sobreposto"] .card-image { aspect-ratio: 4 / 5; }
.card[data-cartao="sobreposto"] .card-image img { object-fit: cover; padding: 0; }
.card[data-cartao="sobreposto"] .card-body { position: absolute; left: 0; right: 0; bottom: 0; flex: none; gap: 3px; padding: 56px 14px 14px; background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); }
.card[data-cartao="sobreposto"] .card-title { font-size: 14px; color: #fff; }
.card[data-cartao="sobreposto"] .price-now { font-size: 15px; color: #fff; }
.card[data-cartao="sobreposto"] .price-was { color: rgba(255, 255, 255, .75); }
.card[data-cartao="sobreposto"] .card-actions { margin-top: 6px; }
.card[data-cartao="sobreposto"] .card-prices { margin-top: 0; }
.card[data-cartao="sobreposto"] :is(.card-category, .card-brand, .card-desc, .card-rating, .card-swatches) { display: none; }

/* Minimalista: sem caixa, tudo centralizado, nome em caixa-alta e discreto. */
.card[data-cartao="editorial"] { border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.card[data-cartao="editorial"]:hover { transform: none; box-shadow: none; }
.card[data-cartao="editorial"] .card-image { aspect-ratio: 3 / 4; border-radius: 0; background: transparent; }
.card[data-cartao="editorial"] .card-body { align-items: center; padding: 12px 4px 0; gap: 6px; }
.card[data-cartao="editorial"] .card-title { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.card[data-cartao="editorial"] .card-swatches { justify-content: center; }
.card[data-cartao="editorial"] .card-prices { justify-content: center; }
.card[data-cartao="editorial"] .price-now { font-size: 13.5px; font-weight: 600; }
.card[data-cartao="editorial"] .card-actions { width: 100%; }
.card[data-cartao="editorial"] :is(.card-category, .card-brand, .card-desc, .card-rating) { display: none; }

/* Moldura: cartão branco com sombra, como uma foto impressa. */
.card[data-cartao="moldura"] { --surface: #fff; --text: #222; --muted: #7a7a7a; border: 0; border-radius: 6px; background: #fff; padding: 10px 10px 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .09); }
.card[data-cartao="moldura"]:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
.card[data-cartao="moldura"] .card-image { aspect-ratio: 1 / 1; border-radius: 3px; background: #f1efeb; }
.card[data-cartao="moldura"] .card-body { padding: 12px 4px 0; gap: 4px; }
.card[data-cartao="moldura"] .card-title { font-size: 13px; font-weight: 600; }
.card[data-cartao="moldura"] :is(.card-category, .card-brand, .card-desc, .card-rating) { display: none; }