/* ===================================================================
   MINI PET — portfolio de miniaturas de pets (/minipet)
   Carrega DEPOIS de minime.css: a pagina usa o layout .mm-* inteiro e os
   tokens do design system da loja, sem paleta propria. Aqui ficam so os
   dois detalhes que a linha PET acrescenta.
   =================================================================== */

/* Selo de patinha no canto do card, para diferenciar a galeria do MINI ME.
   Usa --cy (o mesmo acento da loja) e o mesmo peso dos controles do card. */
.store-minipet-page .mm-grid {
  /* patinha em SVG inline (data URI) — evita mais um request so pelo icone */
  --mp-paw: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><ellipse cx="12" cy="16.6" rx="4.6" ry="4"/><ellipse cx="7.2" cy="8.4" rx="2" ry="2.7"/><ellipse cx="16.8" cy="8.4" rx="2" ry="2.7"/><ellipse cx="3.4" cy="13.4" rx="1.8" ry="2.4"/><ellipse cx="20.6" cy="13.4" rx="1.8" ry="2.4"/></svg>');
}
.store-minipet-page .mm-shot::after {
  content: "";
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 22px; height: 22px;
  opacity: .5;
  background: var(--cy);
  -webkit-mask: var(--mp-paw) center / contain no-repeat;
  mask: var(--mp-paw) center / contain no-repeat;
  pointer-events: none;
  transition: opacity .3s;
}
.store-minipet-page .mm-card:hover .mm-shot::after { opacity: .85; }

/* o reset global usa a{color:inherit}: sem isto o link pro MINI ME na nota
   de rodape fica igual ao texto em volta. --cy-2 e o acento de link da loja. */
.store-minipet-page .mm-legal a { color: var(--cy-2); }