/* Miniatura fiel dos temas — compartilhada pelo painel, vitrine e checkout. */
.tema-previa {
  position:relative;
  isolation:isolate;
  width:100%;
  aspect-ratio:2/3;
  min-height:360px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tp-line) 82%,transparent);
  border-radius:20px;
  color:var(--tp-ink);
  background:
    radial-gradient(circle at 50% 12%,color-mix(in srgb,var(--tp-surface) 72%,transparent),transparent 38%),
    linear-gradient(155deg,var(--tp-bg),var(--tp-bg-deep));
  box-shadow:0 18px 42px color-mix(in srgb,var(--tp-ink) 14%,transparent);
}
.tema-previa::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:14px;
  border:1px solid color-mix(in srgb,var(--tp-metal) 58%,transparent);
  border-radius:14px;
  pointer-events:none;
}
.tema-previa__fundo {
  position:absolute;
  z-index:0;
  inset:0;
  background-position:center;
  background-size:cover;
  opacity:.92;
  pointer-events:none;
}
.tema-previa[data-background-size="tile"] .tema-previa__fundo {
  background-position:left top;
  background-size:46%;
  background-repeat:repeat;
}
.tema-previa__fundo::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--tp-surface) 18%,transparent),transparent 28% 72%,color-mix(in srgb,var(--tp-surface) 18%,transparent));
}
.tema-previa__textura {
  position:absolute;
  z-index:0;
  inset:0;
  opacity:var(--tp-texture-opacity,.14);
  pointer-events:none;
}
.tema-previa[data-textura="nenhuma"] .tema-previa__textura { display:none; }
.tema-previa[data-textura="linho"] .tema-previa__textura {
  background-image:
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--tp-ink) 22%,transparent) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--tp-ink) 16%,transparent) 0 1px,transparent 1px 6px);
}
.tema-previa[data-textura="papel"] .tema-previa__textura {
  background-image:
    radial-gradient(circle,color-mix(in srgb,var(--tp-ink) 25%,transparent) 0 .55px,transparent .75px),
    radial-gradient(circle,color-mix(in srgb,var(--tp-metal) 24%,transparent) 0 .45px,transparent .7px);
  background-size:11px 13px,17px 19px;
}
.tema-previa[data-textura="algodao"] .tema-previa__textura {
  background-image:
    repeating-linear-gradient(32deg,color-mix(in srgb,var(--tp-ink) 14%,transparent) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(122deg,rgba(255,255,255,.3) 0 2px,transparent 2px 9px);
}
.tema-previa[data-textura="aquarela"] .tema-previa__textura {
  background-image:
    radial-gradient(ellipse at 18% 22%,color-mix(in srgb,var(--tp-primary) 35%,transparent) 0 14%,transparent 42%),
    radial-gradient(ellipse at 78% 68%,color-mix(in srgb,var(--tp-metal) 32%,transparent) 0 12%,transparent 40%);
}
.tema-previa[data-textura="moire"] .tema-previa__textura {
  background-image:
    repeating-radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--tp-metal) 45%,transparent) 0 1px,transparent 1px 9px),
    repeating-radial-gradient(circle at 75% 80%,color-mix(in srgb,var(--tp-metal) 35%,transparent) 0 1px,transparent 1px 11px);
}
.tema-previa[data-textura="seda"] .tema-previa__textura {
  background-image:linear-gradient(105deg,transparent 0 35%,color-mix(in srgb,var(--tp-metal) 42%,transparent) 48%,transparent 62% 100%);
}
.tema-previa[data-textura="perolado"] .tema-previa__textura {
  background-image:
    radial-gradient(circle,rgba(255,255,255,.8) 0 1.2px,transparent 1.8px),
    radial-gradient(circle,color-mix(in srgb,var(--tp-metal) 30%,transparent) 0 .7px,transparent 1.2px);
  background-size:18px 18px,29px 29px;
}
.tema-previa[data-textura="pontilhado"] .tema-previa__textura {
  background-image:radial-gradient(circle,color-mix(in srgb,var(--tp-ink) 34%,transparent) 0 .7px,transparent .9px);
  background-size:8px 8px;
}
.tema-previa[data-textura="granulado"] .tema-previa__textura {
  background-image:
    radial-gradient(circle,color-mix(in srgb,var(--tp-ink) 22%,transparent) 0 .45px,transparent .7px),
    radial-gradient(circle,color-mix(in srgb,var(--tp-metal) 18%,transparent) 0 .4px,transparent .7px);
  background-size:7px 9px,13px 11px;
}
.tema-previa[data-textura="ceu-papel"] .tema-previa__textura {
  background-image:
    radial-gradient(circle,color-mix(in srgb,var(--tp-metal) 60%,transparent) 0 .8px,transparent 1px),
    radial-gradient(circle,rgba(255,255,255,.7) 0 .6px,transparent .9px);
  background-size:27px 31px,43px 37px;
}
.tema-previa[data-textura="arabesco"] .tema-previa__textura {
  background-image:
    radial-gradient(ellipse at 100% 0%,transparent 0 62%,color-mix(in srgb,var(--tp-metal) 34%,transparent) 63% 64%,transparent 65%),
    radial-gradient(ellipse at 0 100%,transparent 0 62%,color-mix(in srgb,var(--tp-metal) 24%,transparent) 63% 64%,transparent 65%);
  background-size:48px 48px;
}
.tema-previa__cantoneira {
  position:absolute;
  z-index:2;
  width:55%;
  height:auto;
  opacity:var(--tp-corner-opacity,.65);
  pointer-events:none;
  user-select:none;
}
.tema-previa__cantoneira--superior-esquerdo { top:-1px;left:-1px; }
.tema-previa__cantoneira--superior-direito { top:-1px;right:-1px;transform:scaleX(-1); }
.tema-previa__cantoneira--inferior-direito { right:-1px;bottom:-1px;transform:scale(-1); }
.tema-previa__cantoneira--inferior-esquerdo { left:-1px;bottom:-1px;transform:scaleY(-1); }
.tema-previa__selo {
  position:absolute;
  z-index:4;
  top:24px;
  right:24px;
  max-width:45%;
  padding:.26rem .58rem;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tp-metal) 55%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--tp-surface) 90%,transparent);
  color:var(--tp-ink);
  font:700 .62rem/1.2 var(--tp-font-body);
  letter-spacing:.08em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.tema-previa__conteudo {
  position:absolute;
  z-index:3;
  inset:13% 12%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.tema-previa__linha-fina {
  width:44px;
  height:1px;
  margin-bottom:1rem;
  background:var(--tp-metal);
}
.tema-previa__chamada {
  color:var(--tp-metal);
  font:600 .66rem/1.35 var(--tp-font-body);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.tema-previa__brasao {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin:1.35rem 0 .7rem;
  border:1px solid var(--tp-metal);
  border-radius:50%;
  color:var(--tp-metal);
  background:color-mix(in srgb,var(--tp-surface) 56%,transparent);
  font:400 1.7rem/1 var(--tp-font-title);
}
.tema-previa__conteudo strong {
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  padding:.08em .18em .14em;
  color:var(--tp-primary);
  font-family:var(--tp-font-name);
  font-weight:400;
  font-size:clamp(1.95rem,6.9vw,3.45rem);
  line-height:1.06;
  text-align:center;
  overflow:visible;
}
.tema-previa__conteudo strong > span {
  display:block;
  width:auto;
  max-width:none;
  margin:0;
  padding:0 .16em;
  letter-spacing:0;
  text-indent:0;
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
  transform:none;
  transform-origin:center center;
}
.tema-previa[data-name-style="serif-display"] .tema-previa__conteudo strong > span {
  letter-spacing:-.025em;
}
.tema-previa__titulo {
  margin-top:1rem;
  color:var(--tp-ink);
  font:600 1.05rem/1.2 var(--tp-font-title);
  letter-spacing:.08em;
}
.tema-previa__data {
  margin-top:.55rem;
  color:var(--tp-ink-soft);
  font:500 .7rem/1.35 var(--tp-font-body);
  letter-spacing:.08em;
}
.tema-previa__botao {
  min-width:110px;
  margin-top:1.5rem;
  padding:.58rem 1rem;
  border-radius:999px;
  background:var(--tp-primary);
  color:var(--tp-primary-ink);
  font:700 .7rem/1 var(--tp-font-body);
}
.tema-previa--compact {
  aspect-ratio:4/3;
  min-height:190px;
  border-radius:15px;
}
.tema-previa--compact::after { inset:10px;border-radius:10px; }
.tema-previa--oficial::after,
.tema-previa--oficial > :not(.tema-previa__oficial) { display:none; }
.tema-previa__oficial { position:absolute;z-index:6;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; }
.tema-previa--compact .tema-previa__selo { top:17px;right:17px; }
.tema-previa--compact .tema-previa__conteudo { inset:8% 12%; }
.tema-previa--compact .tema-previa__linha-fina,
.tema-previa--compact .tema-previa__brasao,
.tema-previa--compact .tema-previa__data { display:none; }
.tema-previa--compact .tema-previa__chamada { font-size:.58rem; }
.tema-previa--compact .tema-previa__conteudo strong { margin-top:.65rem;font-size:clamp(1.35rem,4.7vw,2.15rem);line-height:1.08; }
.tema-previa--compact .tema-previa__titulo { margin-top:.6rem;font-size:.82rem; }
.tema-previa--compact .tema-previa__botao { min-width:88px;margin-top:.9rem;padding:.46rem .8rem;font-size:.62rem; }
@media (max-width:520px) {
  .tema-previa { min-height:0; }
  .tema-previa__conteudo strong { font-size:clamp(1.9rem,12vw,3.2rem); }
}

/* Reserva a altura do nome antes da fonte terminar de carregar. Evita que
   miniaturas "pulem" entre a fonte de sistema e a fonte definitiva. */
.tema-previa__conteudo strong { min-height:3.55rem; }
.tema-previa--compact .tema-previa__conteudo strong { min-height:2.75rem; }


/* 2.5.7 — o monograma das miniaturas usa as iniciais reais da Júlia.
   No Lacre Imperial, duas letras recebem espaço e tipografia coerentes. */
.tema-previa__brasao {
  width:64px;
  height:64px;
  padding:.08em .12em 0;
  box-sizing:border-box;
  font-size:1.45rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.tema-previa[data-theme="lacre-imperial"] .tema-previa__brasao {
  width:78px;
  height:78px;
  border-width:4px;
  border-style:double;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--tp-primary) 72%,white),var(--tp-primary) 55%,color-mix(in srgb,var(--tp-primary) 72%,black));
  color:var(--tp-metal);
  font-family:var(--tp-font-name);
  font-size:2rem;
  letter-spacing:.01em;
  box-shadow:0 8px 18px color-mix(in srgb,var(--tp-ink) 22%,transparent),inset 0 2px 5px rgba(255,255,255,.22);
}
.tema-previa--compact[data-theme="lacre-imperial"] .tema-previa__brasao { display:none; }