:root {
  color-scheme: dark;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #050507;
  color: #f8f9fb;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

html {
  background: radial-gradient(circle at top, rgba(109, 124, 255, 0.08), transparent 35%),
    radial-gradient(circle at 20% 20%, rgba(20, 184, 166, 0.08), transparent 35%),
    #050507;
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: #f8f9fb;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(109, 124, 255, 0.3);
  color: #f8f9fb;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade {
  animation: fade 1.1s ease forwards;
}

section {
  position: relative;
}

/* Premium helpers */
.glass-card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(8px) saturate(100%);
}

.ambient-glow{
  box-shadow: 0 20px 80px rgba(109,124,255,0.06), inset 0 1px 0 rgba(255,255,255,0.02);
}

.thin-border{
  border: 1px solid rgba(255,255,255,0.06);
}

.muted{ color: #9ca3af }

/* Magnifier */
.img-magnifier{ position: relative; overflow: hidden }
.magnifier-circle{ position: absolute; width: 150px; height: 150px; border-radius: 9999px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.08); background-repeat: no-repeat; background-position: center; z-index: 40; transform: translate3d(0,0,0); }
.magnifier-circle.hidden{ display: none }

/* Quickview modal */
.quickview-backdrop{ 
  position: fixed; 
  inset: 0; 
  background: rgba(3,7,18,0.85); 
  backdrop-filter: blur(4px);
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 60;
  animation: fadeIn 0.2s ease;
}

.quickview-panel.neon-panel { 
  width: min(920px, 96%); 
  background: linear-gradient(135deg, rgba(2,13,24,0.95) 0%, rgba(6,13,28,0.90) 100%);
  border: 1px solid rgba(19, 232, 241, 0.2);
  border-radius: 16px; 
  padding: 24px; 
  display: flex; 
  gap: 24px; 
  align-items: center;
  box-shadow: 0 0 60px rgba(19, 232, 241, 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
}

.quickview-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(19, 232, 241, 0.05), rgba(34, 244, 255, 0.02));
  pointer-events: none;
}

.quickview-image { 
  width: 420px; 
  height: 320px; 
  object-fit: contain; 
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(19, 232, 241, 0.15);
  border-radius: 12px;
  padding: 12px;
}

.quickview-info { 
  flex: 1; 
  color: #e6eef8;
  position: relative;
  z-index: 1;
}

.quickview-name { 
  font-size: 1.25rem; 
  font-weight: 800;
  letter-spacing: -0.02em;
}

.quickview-price { 
  font-size: 1.1rem; 
  color: #22f4ff; 
  margin-top: 8px;
  font-weight: 700;
}

.quickview-category {
  color: #a8f2ff;
  margin-top: 4px;
}

.quickview-close { 
  position: absolute; 
  right: 18px; 
  top: 18px; 
  background: transparent; 
  border: 0; 
  color: #9eefff;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 2;
}

.quickview-close:hover {
  color: #1df4ff;
}

.quickview-buy {
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hidden { display: none }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}