*{margin: 0;padding: 0;box-sizing: border-box} :root{--primary-color: #2d5016;--secondary-color: #8b7355;--accent-color: #d4af37;--text-dark: #333;--text-light: #666;--bg-light: #f8f5f0;--bg-white: #ffffff;--shadow: 0 2px 10px rgba(0,0,0,0.1);--transition: all 0.3s ease} body{font-family: 'Lato', sans-serif;line-height: 1.6;color: var(--text-dark);background-color: var(--bg-white)} .container{max-width: 1200px;margin: 0 auto;padding: 0 20px} h1, h2, h3, h4{font-family: 'Playfair Display', serif;font-weight: 700;line-height: 1.2} .navbar{background: var(--bg-white);box-shadow: var(--shadow);position: fixed;width: 100%;top: 0;z-index: 1000;transition: var(--transition)} .navbar .container{display: flex;justify-content: space-between;align-items: center;padding: 1rem 20px;gap: 2rem} .logo-container{display: flex;align-items: center;gap: 0.75rem} .logo-icon{color: var(--accent-color);transition: all 0.3s ease} .logo-icon svg{display: block} .nav-brand:hover .logo-icon{transform: rotate(10deg)} .nav-brand:hover .logo-icon svg path:first-child{fill: rgba(212, 175, 55, 0.1)} .nav-brand .logo-text{font-size: 1.75rem;color: var(--primary-color);margin: 0;font-weight: 600;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;letter-spacing: 0.05em} .nav-brand .tagline{font-size: 0.75rem;color: var(--secondary-color);font-weight: 400;text-transform: uppercase;letter-spacing: 0.1em;display: block;margin-top: 0.25rem;margin-left: 48px} .nav-menu{display: flex;list-style: none;gap: 2rem} .nav-menu a{text-decoration: none;color: var(--text-dark);font-weight: 400;transition: var(--transition);position: relative} .nav-menu a:hover{color: var(--primary-color)} .nav-menu a::after{content: '';position: absolute;bottom: -5px;left: 0;width: 0;height: 2px;background: var(--accent-color);transition: var(--transition)} .nav-menu a:hover::after{width: 100%} .nav-actions{display: flex;gap: 1rem;align-items: center} .cart-btn, .user-btn{background: none;border: none;cursor: pointer;padding: 0.5rem;position: relative;color: var(--text-dark);transition: var(--transition)} .cart-btn:hover, .user-btn:hover{color: var(--primary-color)} .cart-btn svg, .user-btn svg{width: 24px;height: 24px;stroke-width: 2} .cart-count{position: absolute;top: -5px;right: -5px;background: var(--accent-color);color: var(--primary-color);border-radius: 50%;width: 20px;height: 20px;font-size: 0.75rem;font-weight: bold;display: flex;align-items: center;justify-content: center} .cart-count:empty, .cart-count:contains('0'){display: none} .language-switcher{display: flex;align-items: center;gap: 0.5rem;margin-right: 0.5rem} .lang-btn{background: none;border: none;color: var(--text-light);font-size: 0.9rem;font-weight: 500;cursor: pointer;padding: 0.25rem 0.5rem;transition: var(--transition)} .lang-btn:hover, .lang-btn.active{color: var(--primary-color)} .lang-divider{color: var(--text-light);font-size: 0.8rem} .nav-toggle{display: none;flex-direction: column;cursor: pointer} .nav-toggle span{width: 25px;height: 3px;background: var(--primary-color);margin: 3px 0;transition: var(--transition)} .hero{margin-top: 80px;height: 90vh;position: relative;overflow: hidden} .hero-slider{height: 100%;position: relative} .hero-slide{height: 100%;background-size: cover;background-position: center;position: relative;display: flex;align-items: center;justify-content: center} .hero-slide::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0.4)} .hero-content{text-align: center;color: white;z-index: 1;animation: fadeInUp 1s ease} .hero-content h2{font-size: 3.5rem;margin-bottom: 1rem;text-shadow: 2px 2px 4px rgba(0,0,0,0.5)} .hero-content p{font-size: 1.3rem;margin-bottom: 2rem;font-weight: 300} .btn-primary, .btn-secondary{display: inline-block;padding: 12px 30px;text-decoration: none;border: none;cursor: pointer;transition: var(--transition);font-weight: 500;text-transform: uppercase;letter-spacing: 1px;font-size: 0.9rem} .btn-primary{background: var(--accent-color);color: var(--primary-color)} .btn-primary:hover{background: var(--primary-color);color: white;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0,0,0,0.2)} .btn-secondary{background: transparent;color: var(--primary-color);border: 2px solid var(--primary-color)} .btn-secondary:hover{background: var(--primary-color);color: white} .section-title{font-size: 2.5rem;text-align: center;margin-bottom: 1rem;color: var(--primary-color)} .section-subtitle{text-align: center;max-width: 800px;margin: 0 auto 3rem;color: var(--text-light);font-size: 1.1rem} .about{padding: 80px 0;background: var(--bg-light)} .products{padding: 80px 0} .tea-category{margin-bottom: 80px} .category-title{font-size: 2rem;margin-bottom: 2rem;text-align: center;color: var(--secondary-color);position: relative;padding-bottom: 1rem} .category-title::after{content: '';position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100px;height: 3px;background: var(--accent-color)} .product-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2rem;margin-top: 3rem} .product-card{background: white;border-radius: 10px;overflow: hidden;box-shadow: var(--shadow);transition: var(--transition);position: relative} .product-card:hover{transform: translateY(-5px);box-shadow: 0 5px 20px rgba(0,0,0,0.15)} .product-image{height: 250px;overflow: hidden;position: relative} .product-image img{width: 100%;height: 100%;object-fit: cover;transition: var(--transition)} .product-card:hover .product-image img{transform: scale(1.1)} .product-info{padding: 1.5rem} .product-info h4{font-size: 1.3rem;margin-bottom: 0.5rem;color: var(--primary-color)} .product-info p{color: var(--text-light);margin-bottom: 1rem;font-size: 0.95rem} .process{padding: 80px 0;background: var(--bg-light)} .process-timeline{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-top: 3rem} .process-step{text-align: center;position: relative} .step-image{width: 200px;height: 200px;margin: 0 auto 1.5rem;border-radius: 50%;overflow: hidden;box-shadow: var(--shadow);position: relative;transition: var(--transition)} .step-image img{width: 100%;height: 100%;object-fit: cover} .process-step:hover .step-image{transform: scale(1.05);box-shadow: 0 5px 20px rgba(0,0,0,0.2)} .step-info h4{font-size: 1.3rem;margin-bottom: 0.5rem;color: var(--primary-color)} .step-info p{color: var(--text-light);max-width: 250px;margin: 0 auto} .giftsets{padding: 80px 0} .gift-grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 3rem;margin-top: 3rem} .gift-card{background: white;border-radius: 10px;overflow: hidden;box-shadow: var(--shadow);transition: var(--transition)} .gift-card:hover{transform: translateY(-5px);box-shadow: 0 5px 20px rgba(0,0,0,0.15)} .gift-image{height: 300px;overflow: hidden} .gift-placeholder{width: 100%;height: 100%;background: var(--bg-light);display: flex;align-items: center;justify-content: center;font-size: 3rem;color: var(--secondary-color)} .gift-placeholder img{width: 100%;height: 100%;object-fit: cover} .gift-info{padding: 2rem} .gift-info h3{font-size: 1.5rem;margin-bottom: 0.5rem;color: var(--primary-color)} .gift-info p{color: var(--text-light);margin-bottom: 1rem} .gift-info ul{list-style: none;margin-bottom: 1.5rem} .gift-info ul li{padding: 0.3rem 0;color: var(--text-dark);position: relative;padding-left: 1.5rem} .gift-info ul li::before{content: '✓';position: absolute;left: 0;color: var(--accent-color);font-weight: bold} .footer{background: var(--primary-color);color: white;padding: 60px 0 20px} .footer-content{display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 3rem;margin-bottom: 3rem} .footer-section h3, .footer-section h4{margin-bottom: 1rem;color: var(--accent-color)} .footer-brand{display: flex;align-items: center;gap: 0.5rem;margin-bottom: 1rem} .footer-brand svg{color: var(--accent-color)} .footer-brand h3{font-size: 1.5rem !important;font-weight: 600 !important;color: white !important;margin: 0 !important} .footer-section p{margin-bottom: 0.5rem;opacity: 0.9} .footer-section ul{list-style: none} .footer-section ul li{padding: 0.3rem 0} .footer-section a{color: white;text-decoration: none;opacity: 0.9;transition: var(--transition)} .footer-section a:hover{opacity: 1;color: var(--accent-color)} .newsletter-form{display: flex;margin-top: 1rem} .newsletter-form input{flex: 1;padding: 10px;border: none;border-radius: 5px 0 0 5px} .newsletter-form button{border-radius: 0 5px 5px 0} .footer-bottom{text-align: center;padding-top: 2rem;border-top: 1px solid rgba(255,255,255,0.2);opacity: 0.8} .modal{display: none;position: fixed;z-index: 2000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.8);animation: fadeIn 0.3s ease;align-items: center;justify-content: center} .modal-content{background-color: white;margin: 5% auto;padding: 0;width: 90%;max-width: 800px;border-radius: 10px;position: relative;animation: slideIn 0.3s ease} .close{color: var(--text-light);position: absolute;right: 20px;top: 15px;font-size: 28px;font-weight: bold;cursor: pointer;z-index: 1} .close:hover{color: var(--text-dark)} @keyframes fadeIn{from{opacity: 0} to{opacity: 1} } @keyframes fadeInUp{from{opacity: 0;transform: translateY(30px)} to{opacity: 1;transform: translateY(0)} } @keyframes slideIn{from{transform: translateY(-50px);opacity: 0} to{transform: translateY(0);opacity: 1} } .cart-modal .modal-content{max-width: 600px} .modal-header{display: flex;justify-content: space-between;align-items: center;padding: 1.5rem;border-bottom: 1px solid #eee} .modal-header h2{margin: 0;color: var(--primary-color)} #cartContent{padding: 1.5rem;max-height: 400px;overflow-y: auto} .empty-cart{text-align: center;padding: 3rem;color: var(--text-light)} .cart-item{display: flex;gap: 1rem;padding: 1rem;border-bottom: 1px solid #eee;align-items: center} .cart-item-image{width: 80px;height: 80px;object-fit: cover;border-radius: 5px} .cart-item-info{flex: 1} .cart-item-info h4{margin: 0 0 0.5rem;color: var(--primary-color)} .cart-item-price{color: var(--secondary-color);font-weight: bold} .cart-item-quantity{display: flex;align-items: center;gap: 0.5rem} .cart-item-quantity button{background: var(--bg-light);border: none;width: 30px;height: 30px;border-radius: 50%;cursor: pointer;transition: var(--transition)} .cart-item-quantity button:hover{background: var(--secondary-color);color: white} .cart-item-remove{background: none;border: none;color: var(--text-light);cursor: pointer;font-size: 1.2rem;transition: var(--transition)} .cart-item-remove:hover{color: #e74c3c} .cart-footer{padding: 1.5rem;border-top: 1px solid #eee;background: var(--bg-light)} .cart-total{display: flex;justify-content: space-between;align-items: center;font-size: 1.2rem;font-weight: bold;margin-bottom: 1rem;color: var(--primary-color)} .user-modal .modal-content{max-width: 400px} .auth-form{padding: 1.5rem} .auth-form h3{margin-bottom: 1.5rem;text-align: center;color: var(--primary-color)} .auth-form form{display: flex;flex-direction: column;gap: 1rem} .auth-form input{padding: 0.75rem;border: 1px solid #ddd;border-radius: 5px;font-size: 1rem;transition: var(--transition)} .auth-form input:focus{outline: none;border-color: var(--primary-color)} .auth-form p{text-align: center;margin-top: 1rem;color: var(--text-light)} .auth-form a{color: var(--primary-color);text-decoration: none} .auth-form a:hover{text-decoration: underline} .user-info{padding: 2rem;text-align: center} .user-info p{margin-bottom: 1rem;color: var(--text-dark)} .toast{position: fixed;bottom: 2rem;right: 2rem;background: var(--primary-color);color: white;padding: 1rem 2rem;border-radius: 5px;box-shadow: var(--shadow);transform: translateY(100px);opacity: 0;transition: var(--transition);z-index: 3000} .toast.show{transform: translateY(0);opacity: 1} .toast.error{background: #e74c3c} .toast.success{background: #27ae60} [lang="zh-TW"] .btn-primary, [lang="zh-TW"] .btn-secondary{font-size: 0.95rem;letter-spacing: 0.05em} .bilingual-text{display: inline-block} [lang="en"] .bilingual-text .zh-text{display: none} [lang="zh-TW"] .bilingual-text .en-text{display: none} @media (max-width: 768px){.navbar{padding: 0;position: fixed;background: rgba(255, 255, 255, 0.98);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)} .navbar .container{padding: 0.75rem 15px;position: relative} .logo-container{gap: 0.4rem} .logo-icon svg{width: 24px;height: 24px} .nav-brand .logo-text{font-size: 1.3rem} .nav-brand .tagline{display: none} .language-switcher{margin-right: 0.5rem;order: -1} .lang-btn{font-size: 0.75rem;padding: 0.15rem 0.3rem} .lang-divider{font-size: 0.7rem} .nav-actions{gap: 0.5rem;margin-left: auto} .cart-btn, .user-btn{padding: 10px;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center} .nav-menu{position: fixed;left: 0;top: 60px;width: 100%;height: 0;flex-direction: column;background-color: white;text-align: center;transition: height 0.3s ease, opacity 0.3s ease;box-shadow: 0 4px 20px rgba(0,0,0,0.1);padding: 0;z-index: 999;overflow: hidden;opacity: 0} .nav-menu.active{height: auto;min-height: 300px;padding: 1.5rem 0;opacity: 1} .nav-menu li{margin: 0.5rem 0} .nav-menu a{display: block;padding: 0.75rem 2rem;font-size: 1.1rem;font-weight: 500} .nav-toggle{display: flex;flex-direction: column;justify-content: center;width: 44px;height: 44px;padding: 10px;cursor: pointer;-webkit-tap-highlight-color: transparent} .nav-toggle span{width: 24px;height: 2px;background: var(--primary-color);margin: 3px 0;transition: all 0.3s ease;border-radius: 2px} .nav-toggle.active span:nth-child(1){transform: rotate(45deg) translate(5px, 5px)} .nav-toggle.active span:nth-child(2){opacity: 0} .nav-toggle.active span:nth-child(3){transform: rotate(-45deg) translate(5px, -5px)} .hero{height: 60vh;min-height: 400px} .hero-content{padding: 1.5rem} .hero-content h2{font-size: 2rem;line-height: 1.2;margin-bottom: 0.75rem} .hero-content p{font-size: 1rem;margin-bottom: 1.5rem} .btn-primary, .btn-secondary{padding: 10px 20px;font-size: 0.85rem} section{padding: 60px 0} .section-title{font-size: 1.75rem;margin-bottom: 0.75rem} .section-subtitle{font-size: 1rem;margin-bottom: 2rem} .product-grid{grid-template-columns: 1fr;gap: 1rem;margin-top: 2rem;padding: 0 10px} .product-card{box-shadow: 0 2px 10px rgba(0,0,0,0.08);border-radius: 12px;overflow: hidden;transition: transform 0.2s ease, box-shadow 0.2s ease} .product-card:active{transform: scale(0.98)} .product-image{height: 200px;position: relative;overflow: hidden} .product-image::after{content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 80px;background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);pointer-events: none} .product-info{padding: 1rem} .product-info h4{font-size: 1.1rem;margin-bottom: 0.4rem} .product-info p{font-size: 0.85rem;margin-bottom: 1rem;line-height: 1.4} .product-info .btn-secondary{width: 100%;padding: 12px;font-size: 0.9rem;border-radius: 8px} .gift-grid{grid-template-columns: 1fr;gap: 2rem} .gift-image{height: 250px} .gift-info{padding: 1.5rem} .gift-info h3{font-size: 1.3rem} .process-timeline{grid-template-columns: 1fr;gap: 1.5rem} .step-image{width: 150px;height: 150px;margin-bottom: 1rem} .step-info h4{font-size: 1.1rem} .step-info p{font-size: 0.9rem} .footer{padding: 40px 0 20px} .footer-content{grid-template-columns: 1fr;gap: 2rem;text-align: center} .footer-section h3, .footer-section h4{font-size: 1.2rem;margin-bottom: 0.75rem} .footer-section p, .footer-section li{font-size: 0.9rem} .newsletter-form{max-width: 100%;margin: 1rem auto 0;flex-direction: column;gap: 0.75rem} .newsletter-form input{width: 100%;text-align: center} .newsletter-form button{width: 100%} .modal{align-items: flex-end;justify-content: center;display: none} .modal-content{width: 100%;max-width: 100%;margin: 0;border-radius: 20px 20px 0 0;max-height: 90vh;animation: slideUp 0.3s ease;overflow-y: auto;-webkit-overflow-scrolling: touch} #productModal .modal-content{max-height: 85vh} .modal-header{position: sticky;top: 0;background: white;z-index: 10;border-radius: 20px 20px 0 0} .close{position: fixed;right: 15px;top: 70px;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);border-radius: 50%;font-size: 24px} .cart-modal .modal-content{padding-bottom: env(safe-area-inset-bottom)} .cart-footer{position: sticky;bottom: 0;background: white;padding: 1rem;border-top: 1px solid #eee;padding-bottom: calc(1rem + env(safe-area-inset-bottom))} .toast{bottom: calc(1rem + env(safe-area-inset-bottom));right: 1rem;left: 1rem;text-align: center;border-radius: 12px} .category-title{font-size: 1.5rem;margin: 1.5rem 0 1rem} .process-timeline{gap: 1rem} .step-image{width: 120px;height: 120px} .footer{padding: 40px 0 calc(20px + env(safe-area-inset-bottom))} @keyframes slideUp{from{transform: translateY(100%)} to{transform: translateY(0)} } } @media (max-width: 380px){.navbar .container{padding: 0.5rem 10px} .logo-icon{display: none} .nav-brand .logo-text{font-size: 1.2rem} .language-switcher{gap: 0.3rem} .lang-btn{font-size: 0.7rem;padding: 0.1rem 0.25rem} .cart-btn, .user-btn{width: 38px;height: 38px;padding: 8px} .cart-btn svg, .user-btn svg{width: 20px;height: 20px} }