/* ==========================================================================
   Tema da loja "Senhor do TCG" — importado do template do Claude Design.
   Fontes e regras-base globais idênticas aos helmets dos arquivos .dc.html.
   Carregado apenas nos layouts da loja (application/auth), não no admin.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

/* Paleta do template:
   fundo   #0b0b0b   dourado #c8a45d   vinho #5e1020
   off-white #f2f2f2 painel  #424242 */

body.tcg-store {
  margin: 0;
  background: #0b0b0b;
  color: #f2f2f2;
  font-family: 'Montserrat', sans-serif;
}

body.tcg-store a {
  color: #c8a45d;
  text-decoration: none;
}

body.tcg-store a:hover {
  color: #f2f2f2;
}

body.tcg-store ::selection {
  background: #5e1020;
  color: #f2f2f2;
}

body.tcg-store input::placeholder,
body.tcg-store textarea::placeholder {
  color: rgba(242, 242, 242, 0.35);
}

body.tcg-store input:focus,
body.tcg-store select:focus,
body.tcg-store textarea:focus {
  outline: 2px solid rgba(200, 164, 93, 0.5);
  outline-offset: 1px;
}

/* Cartão selecionável por rádio (endereço, frete, pagamento no checkout) */
body.tcg-store .tcg-radio-card {
  border: 1px solid rgba(242, 242, 242, 0.12);
  background: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.tcg-store .tcg-radio-card:has(input:checked) {
  border-color: #c8a45d;
  background: rgba(200, 164, 93, 0.08);
}

/* Efeito de brilho holográfico (foil) nas cartas foil da listagem de singles */
body.tcg-store .foil-tile {
  position: relative;
}

body.tcg-store .foil-shimmer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  mix-blend-mode: hard-light;
  background: linear-gradient(115deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 80, 80, 0.22) 8%,
    rgba(255, 160, 0, 0.22) 16%,
    rgba(255, 240, 0, 0.22) 24%,
    rgba(80, 255, 120, 0.22) 32%,
    rgba(0, 180, 255, 0.22) 40%,
    rgba(120, 80, 255, 0.22) 48%,
    rgba(255, 80, 220, 0.22) 56%,
    rgba(255, 80, 80, 0.22) 64%,
    rgba(0, 0, 0, 0) 72%) 0 0 / 300% 300%;
  animation: foil-shift 4s ease infinite;
  animation-play-state: paused;
}

body.tcg-store .foil-tile:hover .foil-shimmer {
  animation-play-state: running;
}

@keyframes foil-shift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}