body, h1, h2, h3, h4, h5, h6, button, a {
      font-family: 'Nunito Sans', sans-serif !important;
    }

html {scroll-behavior: smooth; -webkit-overflow-scrolling: touch;}
/*html {
	font-size: 18px;
}*/
body {overscroll-behavior: none;}

/* Cart - Added */
#cart-snackbar {
  animation: slide-up-fade 0.3s ease-out;
}
@keyframes slide-up-fade {
  0% { transform: translate(-50%, 20px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

	.text-glow {text-shadow: 0 0 8px rgba(0,0,0,0.8), 0 0 16px rgba(0,0,0,0.6);}

    .parallax-bg {background-size: cover; background-position: center;background-repeat: no-repeat;min-height: 60vh;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;}
    
	.parallax-bg img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transform: translateY(0);will-change: transform;}
    .carousel-container { position: relative; overflow: hidden; }
    .carousel-slide { display: flex; width: 100%; transition: transform 0.5s ease; }
    .carousel-slide img { min-width: 100%; object-fit: cover; height: 400px; }
    .carousel-btn {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.7); border-radius: 2%;
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10;
    }
    .carousel-btn:hover { background: rgba(255,255,255,0.9); }
    .prev-btn { left: 20px; }
    .next-btn { right: 20px; }
    .lightbox-image {
      cursor: zoom-in;
      transition: transform 0.3s ease;
    }
    .lightbox-image:hover { transform: scale(1.02); }
    #lightbox { background: rgba(0,0,0,0.9); }
    .nav-transparent { background: transparent; box-shadow: none; }
    .nav-solid { background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
    .mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
    .mobile-menu.open { max-height: 500px; }

/* Floating Label Form Styling */
.form-field-relative {
  position: relative;
}

.form-field-relative input,
.form-field-relative select {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form-field-relative input:focus,
.form-field-relative select:focus {
  border-color: #ec4899;
  outline: none;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.form-field-relative label {
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  color: #6b7280;
  transition: all 0.2s ease;
  pointer-events: none;
  background: white;
  padding: 0 0.25rem;
}

.form-field-relative input:focus + label,
.form-field-relative select:focus + label,
.form-field-relative input:not(:placeholder-shown) + label,
.form-field-relative select:not([value=""]) + label {
  top: -0.75rem;
  font-size: 0.875rem;
  color: #ec4899;
}

/* Ensure select dropdowns have proper styling */
.form-field-relative select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* Phone field styling for optional indication */
.form-field-relative input[name*="Phone"] + label::after {
  content: " (optional)";
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Payment Status Styling */
#payment-status {
  padding: 0.75rem;
  border-radius: 0.375rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.2s ease;
}

#payment-status.text-blue-600 {
  background-color: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

#payment-status.text-green-600 {
  background-color: #dcfce7;
  color: #16a34a;
  border: 1px solid #86efac;
}

#payment-status.text-red-600 {
  background-color: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}