/* ====== Componente: Card (reutilizável em galeria/modulos/etc.) ====== */

@font-face{
  font-family:"ABCDiatypeExpanded";
  src:url("/media/font/ABCDiatypeExpanded-Light-Trial.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}


:root{
  --ink:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --thumb-bg:#d5c7be;   /* fundo padrão das thumbs GLB (pode ser trocado por tema) */
}

/* Card base */
.card{
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  overflow:hidden;
  background:#f5f5f7;
  display:flex;
  flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.08)}

/* Mídia */
.card .media{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  background:var(--thumb-bg);
  overflow:hidden;
  border-radius:0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-drag: none;
}
.card .media .media-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* Loader dentro da mídia */
.media-loader{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.6);
}
.media-loader.is-visible{display:flex}
.spin{
  width:28px; height:28px; border-radius:0px;
  border:3px solid rgba(0,0,0,.15); border-top-color:#111;
  animation:gal-spin 1s linear infinite;
}
@keyframes gal-spin { to { transform: rotate(360deg) } }

/* Dots do carrossel (apenas imagens) */
.media-dots-holder{
  display:none;
  justify-content:center;
  gap:6px;
  margin-top:6px;
}
.media-dots-holder.is-visible{display:flex}
.media-dot{
  width:10px; height:10px; border-radius:0px; cursor:pointer;
  background:transparent; border:2px solid var(--ink);
}
.media-dot.active{ background:var(--ink); border:0 }

/* Cabeçalho/infos do card */
.card .row{display:flex; align-items:baseline; justify-content:space-between; padding:12px 12px 6px}
.card .name{font-weight:800}
.card .price{font-weight:900}
.card .meta{
  display:flex;
  justify-content:flex-end; /* joga o bloco para a direita */
  align-items:center;
}

/* Swatches (cores) */
.swatches{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; padding:0 12px }

/* BOTÃO DE COR: redondo, sem margem (cor ocupa 100%) */
.swatch{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.18);
  padding:0; margin:0;
  cursor:pointer;
  background: var(--color, #ffffff);
}

/* Dot visual via CSS vars (sem “margem” interna) */
.swatch.single .dot{ background: var(--color, #ffffff) }
.swatch.pair{
  background: linear-gradient(145deg,
    var(--a, #ffffff) 0 50%,
    var(--b, #ffffff) 50% 100%
  );
}


/* Ações: sempre coladas ao final do card */
.actions{
  display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px;
  margin-top:auto; /* garante que os botões ficam no rodapé do card */
}
@media (max-width:560px){ .actions{ grid-template-columns:1fr } }

/* Botões (padronizados) */
.actions .btn,
.actions .btn-about,
.actions .btn-buy{
  flex:1 1 auto; height:40px; padding:0 16px;
  border:1px solid #111827; border-radius:0;
  font-weight:800; font-size:14px; line-height:1; cursor:pointer;
  background:#fff; color:#111827;
}
.actions .btn.primary,
.actions .btn-buy{
  background:#111827; color:#fff; border-color:#111827;
}
.actions .btn-about:hover{ background:#f8fafc }
.actions .btn.primary:hover, .actions .btn-buy:hover{ filter:brightness(0.95) }

/* Alerta de seleção de cor (mostrado via JS) */
.card-alert{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  padding:8px 12px; border-radius:10px;
  background:rgba(255,255,255,.75); backdrop-filter:blur(6px);
  color:#111; font-weight:800; border:1px solid rgba(0,0,0,.15); z-index:100;
}

/* ====== Componente: Card — botão Voltar com apenas contorno ====== */
.media-back{
  position:absolute; left:8px; top:8px;
  width:34px; height:34px;
  display:none; place-items:center;
  border:2px solid #111; border-radius:999px;
  background:transparent; color:#111; font-weight:800;
  cursor:pointer; z-index:99; pointer-events:auto;
}
.media-back.is-visible{ display:grid }
.media-back:hover{ filter:brightness(0.95) }
/* Botão de like com ícone */
:root{
  --like-pastel:#ff6b8a;
}

.pc-likewrap{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  width:100%;              /* ocupa toda a linha para poder “encostar” à direita */
}

/* botão “invisível” (sem borda/sem fundo/sem margem) */
.pc-likebtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color: var(--muted);
  line-height:0;
}

.pc-likebtn .pc-like-ico{
  width:18px;
  height:18px;
  display:block;
  fill:none;              /* vazio */
  stroke:currentColor;
  stroke-width:1.8;
}

/* ao curtir: coração preenchido pastel */
.pc-likebtn.is-liked{
  color: var(--like-pastel);
  cursor: default;
}

.pc-likebtn.is-liked .pc-like-ico{
  fill: currentColor;
  stroke: currentColor;
}

.pc-likebtn:disabled{
  opacity:1;
}

.pc-creator-label{
  font-size: 2px;
  opacity: .75;
}
.pc-creator-name{
  font-size: 12px;
  font-weight: 700;
}
.card .media{
  cursor: grab;
  touch-action: pan-y;
}