/* =============================================================================
   1. FONT
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,700;1,400&family=Nunito+Sans:ital,wght@0,400;0,700;1,400&display=swap');

/* =============================================================================
   2. VARIABILI
============================================================================= */
:root {
  --color-bg: #000;
  --color-white: #fff;
  --color-text-soft: #ccc;
  --color-text-muted: #6a6a6a;
  --color-gold: #ffd700;
  --color-gold-strong: #ffc400;
  --color-danger: #ff6b6b;

  --overlay-bg: rgba(0, 0, 0, 0.8);
  --panel-bg: rgba(255, 255, 255, 0.05);
  --panel-border: rgba(255, 255, 255, 0.2);

  --font-title: 'Merriweather Sans', sans-serif;
  --font-body: 'Nunito Sans', sans-serif;

  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 30px;

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-strong: 0 8px 20px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 15px rgba(255, 215, 0, 0.5);

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* =============================================================================
   3. RESET & BASE
============================================================================= */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: url('../assets/images/cursore2.png') 0 0, auto !important;
  box-sizing: border-box;
}

/* Force on interactive elements that often have default pointers */
a, button, input, select, textarea, [role="button"], .pointer-fix {
  cursor: url('../assets/images/cursore2.png') 0 0, pointer !important;
}

img,
.bg,
.shop-item,
[style*="background-image"] {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

img.smooth,
.design-option img.smooth {
  image-rendering: auto;
}

.design-option img.pixelated {
  image-rendering: pixelated;
}

a,
button,
.button-area,
.shop-item,
.toggle-option,
.design-option,
.dot,
.nav,
.gallery-nav,
.close-overlay,
.back-button,
input,
select,
.main-image,
.product-thumbnails img,
.cart-wrapper {
  cursor: inherit !important;
}

/* =============================================================================
   22. ANIMATIONS
============================================================================= */
@keyframes itemEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes frameWobble {
  0% { transform: rotate(-1.5deg) scale(1.02); }
  100% { transform: rotate(1.5deg) scale(1); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5vh); }
}

@keyframes bounceHover {
  0%, 100% { transform: scale(1.1) translateY(0); }
  50% { transform: scale(1.1) translateY(-0.5vh); }
}

@keyframes glowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px #fff)
      drop-shadow(0 0 6px #ffd700)
      drop-shadow(0 0 12px #ff8c00);
  }
  60% {
    filter:
      drop-shadow(0 0 4px #fff)
      drop-shadow(0 0 10px #ffd700)
      drop-shadow(0 0 20px #ff8c00);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@media (max-width: 768px) {
  .designs-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-design-search {
    width: 100%;
  }
}