/* Custom styling & animations for Mizzzo Shop (mizzzoshop.online) */

:root {
  --primary: #1e1e1e;
  --secondary: #8c7355;
  --accent: #c49a6c;
  --bg-warm: #faf7f2;
  --bg-card: #ffffff;
  --border-light: #ece5dc;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-warm);
  color: #2b2825;
  scroll-behavior: smooth;
}

.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1ede6;
}
::-webkit-scrollbar-thumb {
  background: #d4c8b8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b5a490;
}

/* Realistic Frame Mockup Effects */
.frame-oak {
  box-shadow: 
    0 0 0 10px #b89774,
    0 0 0 12px #937453,
    0 18px 38px -10px rgba(0, 0, 0, 0.28),
    0 6px 16px -4px rgba(0, 0, 0, 0.15);
}

.frame-black {
  box-shadow: 
    0 0 0 9px #161616,
    0 0 0 11px #050505,
    0 20px 40px -10px rgba(0, 0, 0, 0.35),
    0 8px 18px -4px rgba(0, 0, 0, 0.2);
}

.frame-gold {
  box-shadow: 
    0 0 0 9px #d4af37,
    0 0 0 11px #aa8012,
    0 20px 40px -10px rgba(180, 140, 40, 0.3),
    0 8px 18px -4px rgba(0, 0, 0, 0.18);
}

.passepartout {
  padding: 14px;
  background-color: #fbfaf6;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.08);
}

/* Subtle Hover Zoom for Art */
.art-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.art-card:hover {
  transform: translateY(-6px);
}

/* Badge Glow */
.glow-badge {
  box-shadow: 0 0 15px rgba(196, 154, 108, 0.35);
}

/* Glassmorphism Navigation */
.nav-blur {
  background: rgba(250, 247, 242, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Toast Notification Animation */
@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.toast-animate {
  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Grain texture overlay */
.bg-grain {
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 0);
  background-size: 24px 24px;
}