/* Minimal custom CSS for functionality that can't be done with Tailwind */

/* Page section visibility */
.page-section {
  display: none;
}

.page-section.active {
  display: block !important;
}

/* Cart sidebar visibility */
.cart-visible .cart-overlay {
  visibility: visible;
  opacity: 1;
}

.cart-visible .cart-sidebar {
  right: 0;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Custom font families */
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
}

/* Golden text selection */
::selection {
  background-color: #f59e0b;
  color: #ffffff;
}

::-moz-selection {
  background-color: #f59e0b;
  color: #ffffff;
}

/* Moving gradient animation for hero */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-gradient {
  background: linear-gradient(
    -45deg,
    #1f2937,
    #374151,
    #4b5563,
    #6b7280,
    #9ca3af,
    #6b7280,
    #4b5563,
    #374151,
    #1f2937
  );
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

/* Canvas print styling - no frame, just the image */

/* Masonry layout */
.masonry-grid {
  column-count: 1;
  column-gap: 2rem;
  column-fill: balance;
}

@media (min-width: 640px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .masonry-grid {
    column-count: 3;
  }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 2rem;
  display: inline-block;
  width: 100%;
}