/* ========================================================= */
/* NÚCLEO: GRID, ESTADOS DE CARREGAMENTO E PAGINAÇÃO         */
/* ========================================================= */

/* ESCALONAMENTO DINÂMICO DOS CARDS (MAGIA DO DATA-MAGIC-GRID)*/
body[data-magic-grid="1"] { --card-scale: 1.4; }
body[data-magic-grid="2"] { --card-scale: 1.2; }
body[data-magic-grid="3"] { --card-scale: 1.1; }
body[data-magic-grid="4"] { --card-scale: 1.0; }
body[data-magic-grid="5"] { --card-scale: 0.85; }
body[data-magic-grid="6"] { --card-scale: 0.75; }

/* OVERRIDE MAGICO PARA MATAR A GRADE NO LOADER/VAZIO */
#gpl-products-container.gpl-layout-override {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 65vh !important;
width: 100% !important;
column-count: 1 !important;
-webkit-column-count: 1 !important;
-moz-column-count: 1 !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}

/* VAZIO MÁGICO E LOADERS BLINDADOS (ANTI-FATIAMENTO) */
.sci-fi-init, .gpl-empty-state {
grid-column: 1 / -1 !important;
column-span: all !important;
-webkit-column-span: all !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
width: 100% !important;
min-height: 65vh !important;
padding-top: 50px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 20px !important;
background: transparent !important;
margin: 0 auto !important;
}

.sci-fi-spinner { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.spinner-ring { position: absolute; border-radius: 50%; border: 2px solid transparent; inset: 0; }
.spinner-ring.outer { border-top-color: #22d3ee; border-bottom-color: #22d3ee; animation: spin 2s linear infinite; }
.spinner-ring.middle { inset: 10%; border-left-color: #10b981; border-right-color: #10b981; animation: spin-reverse 1.5s linear infinite; }
.spinner-ring.inner { inset: 20%; border-top-color: #8b5cf6; border-bottom-color: #8b5cf6; animation: spin 1s linear infinite; }

.sci-fi-core-icon {
font-size: 24px;
color: #e2e8f0;
text-shadow: 0 0 10px #22d3ee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
margin: 0 !important;
}

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }

/* ========================================================================= */
/* A MÁGICA CORRIGIDA: TEXTOS COM CORES DO MENU E ANIMAÇÃO DE FLUXO          */
/* ========================================================================= */
.sci-fi-loader-text, .gpl-empty-text {
font-weight: 900 !important;
text-align: center !important;

/* O SEGREDO: Limita a caixa do gradiente ao tamanho do texto! */
width: fit-content !important; 
max-width: 100% !important;
display: inline-block !important; 
margin: 0 auto !important;

/* Gradiente Global da Logo */
background: linear-gradient(to right, #22d3ee, #4ade80, #facc15, #f472b6, #22d3ee) !important;
background-size: 200% auto !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;

/* Animação Contínua (Fluido) e Flutuação */
animation: magic-shine-text-core 4s linear infinite, icon-float-core 3s ease-in-out infinite !important;


}

.sci-fi-loader-text {
letter-spacing: 0.25em !important;
font-size: 1.2rem !important;
filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.3)) !important;
}

.gpl-empty-text {
font-size: 1.5rem !important;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.8)) drop-shadow(0 0 15px rgba(244, 114, 182, 0.3)) !important;
}

/* Aplicando a magia também no Ícone da Caixa Vazia! */
.gpl-empty-icon {
font-size: 5rem !important;
/* Fit-content corrige a distorção do gradiente no ícone */
display: inline-block !important;
width: fit-content !important;
margin: 0 auto 10px auto !important;

background: linear-gradient(to right, #22d3ee, #4ade80, #facc15, #f472b6, #22d3ee) !important;
background-size: 200% auto !important;
color: transparent !important;
-webkit-background-clip: text !important;
background-clip: text !important;
animation: magic-shine-text-core 4s linear infinite, magicPulseCore 2s infinite ease-in-out !important;


}

/* Keyframes independentes copiados para garantir funcionamento modular */
@keyframes magic-shine-text-core {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}

@keyframes icon-float-core {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}

@keyframes magicPulseCore {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.4)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 20px rgba(244, 114, 182, 0.6)); }
}

/* Paginação Científica */
.gpl-page-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(17, 24, 39, 0.8); border: 1px solid rgba(75, 85, 99, 0.5); color: #d1d5db; font-weight: bold; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; font-family: 'Inter', sans-serif; position: relative; overflow: hidden; }
.gpl-page-btn::before { content: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent); opacity: 0; transition: opacity 0.3s; }
.gpl-page-btn.disabled { opacity: 0.3; cursor: not-allowed; background: transparent; border-color: rgba(250, 204, 21, 0.4); }
.gpl-page-btn:hover:not(.disabled):not(.ellipsis) { background: #1f2937; border-color: #38bdf8; color: #ffffff; transform: translateY(-2px); box-shadow: 0 0 15px rgba(56, 189, 248, 0.4), inset 0 0 10px rgba(56, 189, 248, 0.1); }
.gpl-page-btn:hover:not(.disabled):not(.ellipsis)::before { opacity: 1; }
.gpl-page-btn.active { background: #111827; border-color: #10b981; color: #ffffff; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4), inset 0 0 5px rgba(16, 185, 129, 0.2); text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); }
.gpl-page-btn.ellipsis { background: transparent; border-color: transparent; cursor: default; color: #6b7280; }
@media (min-width: 1024px) { .gpl-page-btn { width: 48px; height: 48px; font-size: 1.1rem; border-radius: 12px; } }