/* Custom Styles */
[x-cloak] { display: none !important; }

/* Toast animations */
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

/* Line clamp utilities */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }

/* Safe area for mobile bottom nav */
.safe-area-bottom {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
}

/* Swiper custom styles */
.hero-pagination .swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
}
.hero-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 4px;
}

/* Product card hover */
.product-card-actions {
    transition: all 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

/* Star rating */
.star-rating input { display: none; }
.star-rating label { cursor: pointer; font-size: 1.25rem; color: #d1d5db; transition: color 0.2s; }
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: #f59e0b; }

/* Button press effect */
.btn-press:active { transform: scale(0.97); }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Prose styling for blog/content */
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #1f2937; }
.prose h4 { font-size: 1.1rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.5rem; color: #374151; }
.prose p { margin-bottom: 1rem; line-height: 1.75; color: #4b5563; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ul li { margin-bottom: 0.25rem; color: #4b5563; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; margin: 1rem 0; color: #6b7280; font-style: italic; }