/* ==========================================================================
   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; }
}

/* Descrição da carta (Markdown renderizado — catalog/cards#show) */
body.tcg-store .card-description p,
body.tcg-store .card-description ul,
body.tcg-store .card-description ol,
body.tcg-store .card-description blockquote {
  margin: 0 0 12px;
}

body.tcg-store .card-description p:last-child,
body.tcg-store .card-description ul:last-child,
body.tcg-store .card-description ol:last-child {
  margin-bottom: 0;
}

body.tcg-store .card-description ul,
body.tcg-store .card-description ol {
  padding-left: 20px;
}

body.tcg-store .card-description strong {
  color: #f2f2f2;
}

body.tcg-store .card-description blockquote {
  padding-left: 12px;
  border-left: 2px solid rgba(200, 164, 93, 0.4);
  color: rgba(242, 242, 242, 0.55);
}

body.tcg-store .card-tap-icon {
  border-radius: 50%;
}


/* Corpo do artigo (Markdown renderizado — articles#show). O preflight do
   Tailwind zera margens/tamanhos de headings e listas, então o estilo
   tipográfico é redefinido aqui. */
body.tcg-store .article-body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(242, 242, 242, 0.82);
  overflow-wrap: break-word;
}

body.tcg-store .article-body > * + * {
  margin-top: 18px;
}

body.tcg-store .article-body h2,
body.tcg-store .article-body h3,
body.tcg-store .article-body h4,
body.tcg-store .article-body h5,
body.tcg-store .article-body h6 {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  line-height: 1.3;
  color: #f2f2f2;
  margin-top: 36px;
}

body.tcg-store .article-body h2 { font-size: 26px; }
body.tcg-store .article-body h3 { font-size: 21px; }
body.tcg-store .article-body h4,
body.tcg-store .article-body h5,
body.tcg-store .article-body h6 { font-size: 18px; }

body.tcg-store .article-body a {
  color: #c8a45d;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.tcg-store .article-body strong { color: #f2f2f2; }

body.tcg-store .article-body ul,
body.tcg-store .article-body ol {
  padding-left: 24px;
}

body.tcg-store .article-body ul { list-style: disc; }
body.tcg-store .article-body ol { list-style: decimal; }
body.tcg-store .article-body li + li { margin-top: 6px; }

body.tcg-store .article-body blockquote {
  padding: 4px 0 4px 18px;
  border-left: 3px solid rgba(200, 164, 93, 0.5);
  color: rgba(242, 242, 242, 0.65);
  font-style: italic;
}

body.tcg-store .article-body hr {
  border: 0;
  border-top: 1px solid rgba(242, 242, 242, 0.12);
  margin: 36px 0;
}

body.tcg-store .article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(242, 242, 242, 0.08);
}

body.tcg-store .article-body pre {
  padding: 16px;
  border-radius: 12px;
  background: #161616;
  overflow-x: auto;
}

body.tcg-store .article-body pre code { padding: 0; background: none; }

body.tcg-store .article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 14px;
}

body.tcg-store .article-body th,
body.tcg-store .article-body td {
  padding: 10px 14px;
  border: 1px solid rgba(242, 242, 242, 0.12);
  text-align: left;
}

body.tcg-store .article-body th {
  color: #f2f2f2;
  background: rgba(200, 164, 93, 0.1);
}

body.tcg-store .article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

body.tcg-store .article-body figure { margin-left: 0; margin-right: 0; }

body.tcg-store .article-body figcaption {
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
  color: rgba(242, 242, 242, 0.5);
}