/* ============================================================================
   skeleton.css — sistema de loading "skeleton" REUTILIZÁVEL (todo o projeto).
   Carregado globalmente no head.php. CSS puro (sem dependência), com shimmer animado.

   Como usar:
   1) Bloco genérico (qualquer forma):
        <div class="skeleton" style="width:200px; height:20px;"></div>
   2) Modificadores de forma prontos:
        <span class="skeleton skeleton-text"></span>      (linha de texto)
        <span class="skeleton skeleton-text sk-w-60"></span> (60% de largura)
        <div class="skeleton skeleton-img"></div>          (bloco de imagem)
        <span class="skeleton skeleton-btn"></span>        (botão)
        <span class="skeleton skeleton-chip"></span>       (chip/grade)
   3) Container que liga/desliga o estado de carregando:
        <div class="is-loading"> ...skeletons... </div>
      Ao terminar, remova a classe is-loading (JS) e mostre o conteúdo real.
      Utilitário: dentro de .is-loading, elementos .sk-hide-when-loading ficam ocultos;
      ao remover .is-loading, os .sk-only-loading (os skeletons) somem sozinhos.
   ============================================================================ */

/* bloco base do skeleton */
.skeleton {
	display: block;
	position: relative;
	overflow: hidden;
	background: #e9ebee;            /* cor base do placeholder */
	border-radius: 6px;
	/* impede seleção/clique no placeholder */
	pointer-events: none; user-select: none;
}
/* brilho (shimmer) que percorre o bloco */
.skeleton::after {
	content: "";
	position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg,
		rgba(255,255,255,0) 0,
		rgba(255,255,255,.6) 50%,
		rgba(255,255,255,0) 100%);
	animation: skShimmer 1.3s ease-in-out infinite;
}
@keyframes skShimmer {
	100% { transform: translateX(100%); }
}

/* respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
	.skeleton::after { animation: none; }
}

/* ===== Modificadores de forma ===== */
.skeleton-text { height: 12px; border-radius: 4px; margin: 6px 0; }
.skeleton-text.sk-lg { height: 18px; }
.skeleton-text.sk-sm { height: 9px; }
.skeleton-title { height: 22px; border-radius: 5px; margin: 0 0 12px; }
.skeleton-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; }
.skeleton-btn { height: 44px; border-radius: 8px; }
.skeleton-chip { display: inline-block; width: 54px; height: 38px; border-radius: 8px; margin: 0 6px 0 0; vertical-align: middle; }
.skeleton-circle { border-radius: 50%; }

/* larguras utilitárias (%) p/ linhas de texto */
.sk-w-100 { width: 100%; }
.sk-w-90  { width: 90%; }
.sk-w-75  { width: 75%; }
.sk-w-60  { width: 60%; }
.sk-w-40  { width: 40%; }
.sk-w-25  { width: 25%; }

/* ===== Alternância de estado via container .is-loading =====
   Dentro de um container .is-loading: mostra os skeletons (.sk-only-loading) e
   esconde o conteúdo real (.sk-hide-when-loading). Ao remover .is-loading, inverte. */
.sk-only-loading { display: none; }
.is-loading .sk-only-loading { display: block; }
.is-loading .sk-hide-when-loading { display: none !important; }

/* ============================================================================
   .img-fade — fade-in suave no carregamento de imagem (opt-in, reutilizável).
   Evita o "flash" de imagem aparecendo crua/saltando. A imagem começa transparente
   e revela quando termina de carregar (classe .is-loaded adicionada via JS/onload).

   Uso:
     <img class="img-fade" src="..." onload="this.classList.add('is-loaded')">
   ou só <img class="img-fade" ...> — o init em produtos-nova.js (e demais) marca as
   já carregadas. Recomendado reservar o espaço no container (aspect-ratio/altura) p/
   o layout não saltar enquanto a imagem não chega.
   ============================================================================ */
.img-fade { opacity: 0; transition: opacity .35s ease; }
.img-fade.is-loaded { opacity: 1; }
/* fallback: se o JS não rodar, não deixa a imagem invisível para sempre */
.no-js .img-fade { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.img-fade { transition: none; }
}

/* ============================================================================
   Toast — feedback rápido reutilizável (ex.: "Produto adicionado ao carrinho").
   Criado/controlado por JS (id #pdp-toast); aparece no canto inferior e some sozinho.
   ============================================================================ */
#pdp-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
	z-index: 99999; max-width: 90vw;
	display: inline-flex; align-items: center; gap: 9px;
	background: #1f2937; color: #fff; font-size: 14px; font-weight: 600;
	padding: 13px 20px; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.25);
	opacity: 0; pointer-events: none; visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#pdp-toast.pdp-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); visibility: visible; }
#pdp-toast .fa { color: #38c172; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { #pdp-toast { transition: opacity .15s; } }