/* KHA BY KAROL — complementos: filtros, carrinho, página de produto.
   Carregado depois de estilo.css. Tudo em cima das mesmas variáveis. */

/* ---------- filtros ---------- */
.filtros-barra{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:20px 0 0;border-bottom:1px solid #F1E4E8;padding-bottom:18px}
.filtros-barra label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-right:4px}
.filtros-barra select,.filtros-barra input{font-family:var(--font-body);font-size:.82rem;
  color:var(--text);background:var(--white);border:1px solid #EFE1E5;border-radius:999px;
  padding:9px 14px;min-width:130px}
.filtros-barra select:focus,.filtros-barra input:focus{outline:0;border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(233,184,198,.25)}
.filtros-barra .limpar{background:transparent;color:var(--rose);font-size:.78rem;
  text-decoration:underline;padding:8px}
.contagem{font-size:.8rem;color:var(--muted);margin:16px 0 0}

/* ---------- card com ações ---------- */
.card .acoes-card{display:flex;gap:8px;margin-top:12px}
.card .acoes-card .add{flex:1;margin-top:0}
.card .ver{flex:0 0 auto;background:transparent;border:1px solid var(--pink);
  color:var(--rose);border-radius:999px;padding:10px 14px;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;transition:background .25s ease}
.card .ver:hover{background:var(--pink-light)}
.card .selo-card{position:absolute;top:10px;left:10px;background:var(--white);
  color:var(--rose);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:5px 10px;box-shadow:var(--shadow)}
.card .foto{position:relative}

/* ---------- conta e carrinho no cabeçalho ---------- */
.acoes .carrinho{position:relative}
.acoes .contador{position:absolute;top:-6px;right:-8px;background:var(--rose);color:#fff;
  font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;
  display:grid;place-items:center;padding:0 4px}

/* ---------- carrinho ---------- */
.carrinho-grade{display:grid;grid-template-columns:1.5fr .9fr;gap:28px;align-items:start;
  margin-top:28px}
.itens{border:1px solid #F1E4E8;border-radius:var(--radius);background:var(--white);
  overflow:hidden}
.item{display:grid;grid-template-columns:86px 1fr auto;gap:16px;padding:16px;
  border-bottom:1px solid #F6ECEF;align-items:center}
.item:last-child{border-bottom:0}
.item .mini{width:86px;height:86px;border-radius:12px;background:var(--pink-light);
  overflow:hidden;display:grid;place-items:center;color:var(--pink-dark);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase}
.item .mini img{width:100%;height:100%;object-fit:cover}
.item h3{font-family:var(--font-body);font-size:.92rem;font-weight:500;margin-bottom:4px}
.item .p{color:var(--rose);font-weight:700;font-size:.95rem}
.item .qtd{display:flex;align-items:center;gap:8px;margin-top:8px}
.item .qtd button{width:28px;height:28px;border-radius:50%;background:var(--pink-light);
  color:var(--rose);font-weight:700}
.item .remover{color:var(--muted);font-size:.75rem;text-decoration:underline;
  background:transparent;margin-top:8px}
.resumo{border:1px solid #F1E4E8;border-radius:var(--radius);background:var(--white);
  padding:24px;position:sticky;top:20px}
.resumo h3{font-family:var(--font-title);font-size:1.3rem;margin-bottom:16px}
.linha{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);
  padding:7px 0}
.linha.total{border-top:1px solid #F1E4E8;margin-top:10px;padding-top:14px;
  color:var(--text);font-weight:700;font-size:1.05rem}
.resumo .btn{margin-top:16px}
.resumo .nota{font-size:.75rem;color:var(--muted);margin-top:10px;line-height:1.5}
.vazio-carrinho{border:1px dashed var(--pink);border-radius:var(--radius);padding:44px 24px;
  text-align:center;background:var(--white);margin-top:28px}
.vazio-carrinho p{color:var(--muted);margin:10px 0 20px}

/* ---------- página de produto ---------- */
.produto{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;margin-top:26px;
  align-items:start}
.galeria .principal{aspect-ratio:1/1;border-radius:20px;background:var(--pink-light);
  overflow:hidden;display:grid;place-items:center;color:var(--pink-dark);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase}
.galeria .principal img{width:100%;height:100%;object-fit:cover}
.minis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.minis img{border-radius:10px;aspect-ratio:1/1;object-fit:cover;cursor:pointer;
  border:1px solid #F1E4E8}
.info h1{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-bottom:10px}
.info .categoria{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--pink-dark);display:block;margin-bottom:10px}
.info .preco{font-family:var(--font-title);font-size:2rem;color:var(--rose);
  font-weight:600;margin:14px 0 4px}
.info .parcela{font-size:.85rem;color:var(--muted)}
.info .descricao{color:var(--muted);line-height:1.85;margin:20px 0}
.info .beneficios{list-style:none;padding:0;display:grid;gap:9px;font-size:.88rem;
  color:#5C4E53;margin-bottom:22px}
.info .beneficios li::before{content:"—";color:var(--pink-dark);margin-right:8px}
.info .comprar{display:flex;gap:10px;flex-wrap:wrap}
.info .comprar .btn{flex:1 1 180px}
.relacionados{margin-top:56px}
.relacionados h2{font-size:1.6rem;margin-bottom:20px}

@media (max-width:860px){
  .carrinho-grade,.produto{grid-template-columns:1fr}
  .resumo{position:static}
  .item{grid-template-columns:70px 1fr;gap:12px}
  .item .mini{width:70px;height:70px}
  .item .acoes-item{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
}