/* =============================================
   App Styles — Storefront
   Extracted from templates/header.php & footer.php
   ============================================= */

/* Base */
body { font-family: 'Inter', sans-serif; }
.font-serif { font-family: 'Cormorant Garamond', serif; }

/* Utilities */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Prose styling for imported HTML descriptions */
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6 { color: #111827; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose h1 { font-size: 1.5em; } .prose h2 { font-size: 1.3em; } .prose h3 { font-size: 1.15em; }
.prose p { margin-bottom: 0.75em; }
.prose ul,.prose ol { margin: 0.75em 0; padding-left: 1.5em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.25em; }
.prose a { color: #111827; text-decoration: underline; }
.prose img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.875rem; }
.prose th,.prose td { border: 1px solid #e5e7eb; padding: 0.5em 0.75em; text-align: left; }
.prose th { background: #f9fafb; font-weight: 600; color: #374151; }
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }
.prose strong,.prose b { color: #111827; font-weight: 600; }

/* Animations */
.animate-fade { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Glass effect */
.glass { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* Mobile Menu Transitions */
#mobileMenu { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
#mobileMenu.is-open { opacity: 1; pointer-events: auto; }
#mobileMenu .menu-item { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
#mobileMenu.is-open .menu-item { opacity: 1; transform: translateY(0); }
#mobileMenu.is-open .menu-item:nth-child(1) { transition-delay: 0.1s; }
#mobileMenu.is-open .menu-item:nth-child(2) { transition-delay: 0.15s; }
#mobileMenu.is-open .menu-item:nth-child(3) { transition-delay: 0.2s; }
#mobileMenu.is-open .menu-item:nth-child(4) { transition-delay: 0.25s; }
#mobileMenu.is-open .menu-item:nth-child(5) { transition-delay: 0.3s; }
#mobileMenu.is-open .menu-item:nth-child(6) { transition-delay: 0.35s; }
#mobileMenu.is-open .menu-item:nth-child(7) { transition-delay: 0.4s; }
#mobileMenu .menu-bottom { opacity: 0; transform: translateY(15px); transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s; }
#mobileMenu.is-open .menu-bottom { opacity: 1; transform: translateY(0); }

/* Trustpilot Review Scroll */
@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.tp-scroll { animation: scrollLeft 30s linear infinite; }
.tp-scroll:hover { animation-play-state: paused; }