*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg-primary: #0d0d0d; --bg-secondary: #1a1a1a; --bg-tertiary: #222222; --bg-card: #1e1e1e; --gold: #c9a962; --gold-light: #e6c88a; --gold-dark: #a88840; --amber: #d4a843; --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --border: #333333; --border-light: #444444; --shadow: 0 4px 20px rgba(0,0,0,0.5); --shadow-gold: 0 4px 20px rgba(201,169,98,0.2); --radius: 4px; --transition: all 0.3s ease; --font-heading: 'Cinzel', serif; --font-body: 'Jost', sans-serif; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-secondary); line-height: 1.6; font-size: 15px; overflow-x: hidden; } a { color: inherit; text-decoration: none; transition: var(--transition); } a:hover { color: var(--gold); } img { max-width: 100%; height: auto; display: block; } button { cursor: pointer; font-family: inherit; border: none; background: none; } .container { max-width: 1280px; margin: 0 auto; padding: 0 20px; } /* ============ ANNOUNCEMENT BAR ============ */ .announcement { background: var(--bg-secondary); color: var(--gold-light); text-align: center; padding: 10px 20px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid var(--border); } .announcement i { margin-right: 8px; } /* ============ TOP SOCIAL BAR ============ */ .top-bar { background: var(--bg-tertiary); padding: 8px 20px; border-bottom: 1px solid var(--border); } .top-bar-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; } .social-icons { display: flex; gap: 18px; } .social-icons a { color: var(--text-muted); font-size: 14px; transition: var(--transition); } .social-icons a:hover { color: var(--gold); } .top-bar-info { color: var(--text-muted); font-size: 12px; letter-spacing: 0.5px; } /* ============ HEADER / LOGO ============ */ .header { background: var(--bg-primary); padding: 30px 20px; text-align: center; border-bottom: 1px solid var(--border); } .header-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto; } .logo { font-family: var(--font-heading); font-size: 32px; font-weight: 700; color: var(--gold); letter-spacing: 4px; text-transform: uppercase; } .logo span { color: var(--gold-light); } .logo-sub { display: block; font-family: var(--font-body); font-size: 11px; letter-spacing: 6px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; } .header-actions { display: flex; gap: 20px; align-items: center; } .header-actions button { color: var(--text-secondary); font-size: 18px; transition: var(--transition); position: relative; } .header-actions button:hover { color: var(--gold); } /* Language Switcher */ .lang-switcher { position: relative; display: inline-block; } .lang-switcher-btn { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius); transition: var(--transition); background: transparent; border: 1px solid var(--border); } .lang-switcher-btn:hover { color: var(--gold); border-color: var(--gold-dark); } .lang-switcher-btn i { font-size: 12px; } .lang-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 160px; max-height: 400px; overflow-y: auto; z-index: 9999; } .lang-dropdown.open { display: block; } .lang-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--text-secondary); font-size: 13px; border-bottom: 1px solid var(--border); transition: var(--transition); } .lang-dropdown a:last-child { border-bottom: none; } .lang-dropdown a:hover { background: var(--bg-tertiary); color: var(--gold); } .lang-dropdown a.active { color: var(--gold); font-weight: 600; } .lang-dropdown a .flag { font-size: 18px; } .cart-count { position: absolute; top: -8px; right: -10px; background: var(--gold); color: var(--bg-primary); font-size: 10px; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .menu-toggle { display: none; color: var(--text-secondary); font-size: 22px; } /* ============ NAVIGATION ============ */ .navigation { background: var(--bg-secondary); border-bottom: 2px solid var(--gold-dark); } .nav-list { display: flex; justify-content: center; gap: 40px; list-style: none; max-width: 1280px; margin: 0 auto; padding: 15px 20px; flex-wrap: wrap; } .nav-list a { color: var(--text-primary); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; position: relative; padding: 5px 0; } .nav-list a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease; } .nav-list a:hover::after { width: 100%; } .nav-list a:hover { color: var(--gold); } /* ============ HERO BANNER ============ */ .hero { position: relative; background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 50%, #1a1a1a 100%); padding: 80px 20px; text-align: center; overflow: hidden; border-bottom: 1px solid var(--border); } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(201,169,98,0.1) 0%, transparent 70%); pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } .hero h1 { font-family: var(--font-heading); font-size: 48px; font-weight: 700; color: var(--text-primary); margin-bottom: 20px; letter-spacing: 3px; line-height: 1.2; } .hero h1 .accent { color: var(--gold); } .hero p { font-size: 18px; color: var(--text-secondary); margin-bottom: 35px; letter-spacing: 1px; } .btn-gold { display: inline-block; background: var(--gold); color: var(--bg-primary); padding: 16px 45px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; border: 2px solid var(--gold); transition: var(--transition); cursor: pointer; } .btn-gold:hover { background: transparent; color: var(--gold); } .btn-outline { display: inline-block; background: transparent; color: var(--gold); padding: 14px 40px; font-family: var(--font-heading); font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; border: 2px solid var(--gold); transition: var(--transition); cursor: pointer; } .btn-outline:hover { background: var(--gold); color: var(--bg-primary); } /* ============ FEATURES ============ */ .features { background: var(--bg-secondary); padding: 60px 20px; border-bottom: 1px solid var(--border); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1280px; margin: 0 auto; } .feature-item { text-align: center; padding: 20px; } .feature-icon { font-size: 42px; color: var(--gold); margin-bottom: 20px; display: inline-block; } .feature-item h3 { font-family: var(--font-heading); font-size: 18px; color: var(--text-primary); letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } .feature-item p { color: var(--text-muted); font-size: 14px; line-height: 1.7; } /* ============ SECTION HEADERS ============ */ .section-header { text-align: center; margin-bottom: 50px; } .section-header .subtitle { font-family: var(--font-heading); font-size: 12px; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; } .section-header h2 { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; position: relative; display: inline-block; padding: 0 60px; } .section-header h2::before, .section-header h2::after { content: '❖'; position: absolute; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 20px; } .section-header h2::before { left: 0; } .section-header h2::after { right: 0; } /* ============ PRODUCT GRID ============ */ .products-section { padding: 80px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); } .products-section.alt-bg { background: var(--bg-secondary); } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1280px; margin: 0 auto; } .product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: var(--transition); position: relative; } .product-card:hover { transform: translateY(-5px); border-color: var(--gold-dark); box-shadow: var(--shadow-gold); } .product-image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-tertiary); } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.05); } .product-badge { position: absolute; top: 12px; left: 12px; background: var(--gold); color: var(--bg-primary); padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 2px; } .product-actions { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; opacity: 0; transform: translateX(10px); transition: var(--transition); } .product-card:hover .product-actions { opacity: 1; transform: translateX(0); } .product-actions button { width: 36px; height: 36px; background: rgba(0,0,0,0.7); color: var(--text-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: var(--transition); } .product-actions button:hover { background: var(--gold); color: var(--bg-primary); } .product-info { padding: 20px; text-align: center; } .product-name { font-family: var(--font-heading); font-size: 15px; color: var(--text-primary); margin-bottom: 10px; letter-spacing: 1px; line-height: 1.4; min-height: 42px; } .product-price { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; } .price-original { color: var(--text-muted); text-decoration: line-through; font-size: 14px; } .price-sale { color: var(--gold); font-weight: 600; font-size: 17px; } .price-regular { color: var(--gold); font-weight: 600; font-size: 17px; } .product-rating { display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 12px; } .product-rating .stars { color: var(--gold); letter-spacing: 1px; } .product-rating .rating-count { color: var(--text-muted); } .view-all-btn { text-align: center; margin-top: 50px; } /* ============ CATEGORY SHOWCASE ============ */ .category-section { padding: 70px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); } .category-header { display: flex; justify-content: space-between; align-items: center; max-width: 1280px; margin: 0 auto 40px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .category-title { font-family: var(--font-heading); font-size: 24px; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; } .category-title i { color: var(--gold); margin-right: 12px; } .category-link { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; } .category-link:hover { color: var(--gold-light); } /* ============ TESTIMONIALS ============ */ .testimonials { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); padding: 80px 20px; border-bottom: 1px solid var(--border); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1280px; margin: 0 auto; } .testimonial-card { background: var(--bg-card); border: 1px solid var(--border); padding: 35px 30px; text-align: center; border-radius: var(--radius); transition: var(--transition); } .testimonial-card:hover { border-color: var(--gold-dark); } .testimonial-stars { color: var(--gold); font-size: 16px; margin-bottom: 20px; letter-spacing: 2px; } .testimonial-text { color: var(--text-secondary); font-style: italic; font-size: 15px; line-height: 1.8; margin-bottom: 25px; position: relative; } .testimonial-text::before { content: '\201C'; position: absolute; top: -10px; left: 0; font-size: 60px; color: var(--gold); opacity: 0.3; font-family: Georgia, serif; line-height: 1; } .testimonial-author { font-family: var(--font-heading); font-size: 14px; color: var(--gold); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; } .testimonial-verified { color: var(--text-muted); font-size: 12px; } /* ============ FAQ ============ */ .faq-section { padding: 80px 20px; background: var(--bg-secondary); border-bottom: 1px solid var(--border); } .faq-container { max-width: 800px; margin: 0 auto; } .faq-item { border: 1px solid var(--border); margin-bottom: 12px; border-radius: var(--radius); overflow: hidden; background: var(--bg-card); transition: var(--transition); } .faq-item.active { border-color: var(--gold-dark); } .faq-question { width: 100%; text-align: left; padding: 22px 25px; color: var(--text-primary); font-family: var(--font-heading); font-size: 15px; letter-spacing: 1px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition); } .faq-question:hover { color: var(--gold); } .faq-icon { color: var(--gold); transition: transform 0.3s ease; font-size: 12px; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-inner { padding: 0 25px 22px; color: var(--text-secondary); font-size: 14px; line-height: 1.8; } .faq-item.active .faq-answer { max-height: 500px; } /* ============ INSTAGRAM FEED ============ */ .instagram-section { padding: 70px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--border); } .instagram-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 1280px; margin: 0 auto; } .instagram-item { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bg-tertiary); } .instagram-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .instagram-item:hover img { transform: scale(1.08); } .instagram-overlay { position: absolute; inset: 0; background: rgba(201,169,98,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); color: #fff; font-size: 28px; } .instagram-item:hover .instagram-overlay { opacity: 1; } .instagram-follow { text-align: center; margin-top: 30px; color: var(--text-muted); font-size: 13px; letter-spacing: 2px; } .instagram-follow a { color: var(--gold); } /* ============ FOOTER ============ */ .footer { background: var(--bg-secondary); padding: 70px 20px 30px; border-top: 2px solid var(--gold-dark); } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px; max-width: 1280px; margin: 0 auto; } .footer-col h4 { font-family: var(--font-heading); font-size: 15px; color: var(--text-primary); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 25px; position: relative; padding-bottom: 15px; } .footer-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--gold); } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 12px; } .footer-col li a { color: var(--text-muted); font-size: 14px; transition: var(--transition); } .footer-col li a:hover { color: var(--gold); padding-left: 5px; } .footer-contact li { color: var(--text-muted); font-size: 14px; display: flex; gap: 12px; align-items: flex-start; } .footer-contact li i { color: var(--gold); margin-top: 4px; } .footer-contact li a { color: var(--gold); } .newsletter-form { display: flex; gap: 0; margin-top: 5px; } .newsletter-form input { flex: 1; padding: 14px 18px; background: var(--bg-tertiary); border: 1px solid var(--border); border-right: none; color: var(--text-primary); font-family: var(--font-body); font-size: 14px; outline: none; transition: var(--transition); } .newsletter-form input::placeholder { color: var(--text-muted); } .newsletter-form input:focus { border-color: var(--gold-dark); } .newsletter-form button { background: var(--gold); color: var(--bg-primary); padding: 0 25px; font-size: 14px; transition: var(--transition); } .newsletter-form button:hover { background: var(--gold-light); } .newsletter-success { color: var(--gold); font-size: 13px; margin-top: 10px; display: none; } /* ============ COPYRIGHT ============ */ .copyright { background: var(--bg-primary); padding: 25px 20px; border-top: 1px solid var(--border); } .copyright-inner { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; } .copyright-text { color: var(--text-muted); font-size: 13px; letter-spacing: 1px; } .payment-methods { display: flex; gap: 15px; align-items: center; } .payment-methods i { font-size: 24px; color: var(--text-muted); transition: var(--transition); } .payment-methods i:hover { color: var(--gold); } /* ============ MOBILE MENU ============ */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; width: 300px; height: 100vh; background: var(--bg-secondary); z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease; padding: 30px 25px; overflow-y: auto; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .mobile-menu-close { color: var(--text-secondary); font-size: 24px; cursor: pointer; } .mobile-menu-close:hover { color: var(--gold); } .mobile-menu ul { list-style: none; } .mobile-menu li { border-bottom: 1px solid var(--border); } .mobile-menu li a { display: block; padding: 15px 0; color: var(--text-secondary); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .mobile-menu li a:hover { color: var(--gold); } .mobile-menu-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; } .mobile-menu-backdrop.active { display: block; } /* ============ LOADING ============ */ .loading-spinner { display: flex; justify-content: center; align-items: center; padding: 40px; color: var(--gold); font-size: 14px; letter-spacing: 2px; } .loading-spinner i { animation: spin 1s linear infinite; margin-right: 10px; } @keyframes spin { to { transform: rotate(360deg); } } .empty-state { text-align: center; padding: 40px; color: var(--text-muted); font-size: 14px; grid-column: 1 / -1; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(3, 1fr); } .instagram-grid { grid-template-columns: repeat(4, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } .hero h1 { font-size: 38px; } .section-header h2 { font-size: 28px; padding: 0 45px; } } @media (max-width: 768px) { .menu-toggle { display: block; } .nav-list { display: none; } .header-inner { flex-wrap: wrap; gap: 15px; } .logo { font-size: 24px; } .logo-sub { font-size: 9px; letter-spacing: 4px; } .hero { padding: 50px 20px; } .hero h1 { font-size: 28px; letter-spacing: 2px; } .hero p { font-size: 15px; } .features-grid { grid-template-columns: 1fr; gap: 30px; } .products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .testimonials-grid { grid-template-columns: 1fr; } .instagram-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 35px; } .section-header h2 { font-size: 22px; padding: 0 35px; } .section-header h2::before, .section-header h2::after { font-size: 16px; } .copyright-inner { flex-direction: column; text-align: center; } .top-bar-info { display: none; } .category-header { flex-direction: column; gap: 10px; align-items: flex-start; } } @media (max-width: 480px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .product-info { padding: 15px; } .product-name { font-size: 13px; min-height: 36px; } .product-price { flex-direction: column; gap: 3px; } .instagram-grid { grid-template-columns: repeat(2, 1fr); } .hero h1 { font-size: 24px; } .btn-gold, .btn-outline { padding: 14px 30px; font-size: 12px; } .announcement { font-size: 11px; letter-spacing: 1px; } }
Spedizione gratuita in tutto il mondo
Supporto: [email protected]

Eccellenza forgiata a mano
Dal 1985

Spade e gioielli premium realizzati con maestria ancestrale

Esplora la collezione

Materiali pregiati

Acciaio Damasco, argento sterling e oro 18K dalle migliori materie prime

Qualità forgiata a mano

Ogni pezzo è lavorato a mano da maestri spadai e gioiellieri

Durata a vita

Le nostre opere durano generazioni — garanzia a vita sull'artigianato

Più popolari

Bestseller

Vedi tutti i bestseller
Nuova collezione

Nuovi arrivi

Vedi tutti i nuovi arrivi
Anelli e spade
Vedi tutto
Collane
Vedi tutto
Orecchini
Vedi tutto
Bracciali
Vedi tutto
Cosa dicono i clienti

Recensioni clienti

★★★★★

The craftsmanship of the sword I ordered is absolutely breathtaking. The attention to detail is incredible — a true work of art that will be treasured for generations.

Marcus T.
Verified Buyer · United States
★★★★★

I purchased a ring for my wedding anniversary and my wife was speechless. The quality and finish exceeded all expectations. This is jewelry that will be passed down as a family heirloom.

Sofia R.
Verified Buyer · Italy
★★★★★

Longquan Forge is the real deal. Their customer service is as impeccable as their craftsmanship. The necklace I ordered arrived in perfect condition, beautifully packaged.

James K.
Verified Buyer · United Kingdom
Aiuto e informazioni

Domande frequenti

Le nostre spade sono completamente funzionali, forgiate a mano in acciaio al carbonio. Sono temperate con tecniche tradizionali. Consigliamo però di trattarle come pezzi da collezione.
Offriamo una politica di reso di 30 giorni. Contattate il supporto per avviare un reso. Gli articoli devono essere nelle condizioni originali.
La maggior parte degli ordini viene spedita entro 2-3 giorni lavorativi. La spedizione internazionale richiede 7-14 giorni lavorativi.
Sì! Spediamo in oltre 100 paesi. Spedizione gratuita per ordini superiori a $199. Potrebbero applicarsi dazi doganali.
Conservare nella scatola protettiva. Evitare umidità, sostanze chimiche e temperature estreme. Pulire con un panno morbido e asciutto.
Seguici su Instagram

@LongquanForge

Sword craftsmanship
 Gold ring
 Damascus steel
 Jewelry craft
 Necklace
 Sword detail
Taggateci con #LongquanForge per essere presenti
© 2024 Longquan Forge. Tutti i diritti riservati.
(function() { 'use strict'; var API_BASE = ''; function $(id) { return document.getElementById(id); } function renderProducts(containerId, products) { var container = $(containerId); if (!container) return; container.innerHTML = ''; if (!products || products.length === 0) { container.innerHTML = '
No products available at this time.
'; return; } var html = ''; products.forEach(function(p) { var hasDiscount = p.original_price && p.original_price > p.price; var originalPriceHtml = hasDiscount ? '$' + p.original_price.toFixed(2) + '' : ''; var priceHtml = hasDiscount ? '$' + p.price.toFixed(2) + '' : '$' + p.price.toFixed(2) + ''; var badgeHtml = p.is_bestseller ? 'Best Seller' : ''; var ratingStars = '★★★★★'; if (p.rating) { var r = Math.round(p.rating); ratingStars = '★★★★★'.substring(0, r) + '☆☆☆☆☆'.substring(0, 5 - r); } html += '
' + '
' + (badgeHtml) + '' + escapeHtml(p.name || '') + '' + '
' + '' + '' + '' + '
' + '
' + '
' + '
' + escapeHtml(p.name || '') + '
' + '
' + originalPriceHtml + priceHtml + '
' + '
' + '' + ratingStars + '' + '(' + (p.review_count || 0) + ')' + '
' + '
' + '
'; }); container.innerHTML = html; } function escapeHtml(str) { var div = document.createElement('div'); div.appendChild(document.createTextNode(str)); return div.innerHTML; } function fetchJSON(url, fallback) { return fetch(url, { headers: { 'Content-Type': 'application/json' } }) .then(function(res) { if (!res.ok) throw new Error('API request failed: ' + res.status); return res.json(); }) .catch(function(err) { console.warn('API fetch failed for ' + url + ': ' + err.message); return fallback; }); } function loadProducts() { var endpoints = [ { id: 'bestSellersGrid', url: API_BASE + '/api/products?category=bestsellers&status=active' }, { id: 'newArrivalsGrid', url: API_BASE + '/api/products?category=new-arrivals&status=active' }, { id: 'ringsSwordsGrid', url: API_BASE + '/api/products?category=rings-swords&status=active' }, { id: 'necklacesGrid', url: API_BASE + '/api/products?category=necklaces&status=active' }, { id: 'earringsGrid', url: API_BASE + '/api/products?category=earrings&status=active' }, { id: 'braceletsGrid', url: API_BASE + '/api/products?category=bracelets&status=active' } ]; endpoints.forEach(function(ep) { fetchJSON(ep.url, []).then(function(data) { var products = Array.isArray(data) ? data : (data.products || data.data || []); renderProducts(ep.id, products); }); }); } function loadHeaderMenu() { fetchJSON(API_BASE + '/api/menu?position=header', null).then(function(data) { if (!data || !data.length) return; var items = Array.isArray(data) ? data : (data.items || data.data || []); var navList = $('navList'); var mobileNavList = $('mobileNavList'); if (!navList) return; var navHtml = ''; var mobileHtml = ''; items.forEach(function(item) { var label = escapeHtml(item.name || item.label || ''); var url = escapeHtml(item.url || '/'); navHtml += '
  • ' + label + '
    • '; mobileHtml += '
  • ' + label + '
    • '; }); navList.innerHTML = navHtml; if (mobileNavList) mobileNavList.innerHTML = mobileHtml; }); } function loadCategories() { fetchJSON(API_BASE + '/api/categories', null).then(function(data) { if (!data || !data.length) return; var cats = Array.isArray(data) ? data : (data.categories || data.data || []); document.querySelectorAll('.category-section').forEach(function(section) { var catSlug = section.id.replace('Section', '').toLowerCase(); var match = cats.find(function(c) { var name = (c.name || '').toLowerCase(); var slug = (c.slug || c.alias || '').toLowerCase(); return name.indexOf(catSlug) !== -1 || slug.indexOf(catSlug) !== -1 || catSlug.indexOf(name) !== -1 || catSlug.indexOf(slug) !== -1; }); if (match && match.name) { var titleEl = section.querySelector('.category-title'); if (titleEl) titleEl.innerHTML = ' ' + escapeHtml(match.name); } }); }); } function loadFooterMenu() { fetchJSON(API_BASE + '/api/menu?position=footer', null).then(function(data) { if (!data || !data.length) return; var items = Array.isArray(data) ? data : (data.items || data.data || []); var footerCol = document.querySelector('.footer-col:nth-child(2) ul'); if (!footerCol) return; var html = ''; items.forEach(function(item) { var label = escapeHtml(item.name || item.label || ''); var url = escapeHtml(item.url || '/'); html += '
  • ' + label + '
    • '; }); footerCol.innerHTML = html; }); } function initFAQ() { var questions = document.querySelectorAll('.faq-question'); questions.forEach(function(btn) { btn.addEventListener('click', function() { var item = btn.closest('.faq-item'); var wasActive = item.classList.contains('active'); document.querySelectorAll('.faq-item').forEach(function(i) { i.classList.remove('active'); }); if (!wasActive) item.classList.add('active'); }); }); } function initMobileMenu() { var toggle = $('menuToggle'); var close = $('menuClose'); var menu = $('mobileMenu'); var backdrop = $('mobileBackdrop'); function openMenu() { menu.classList.add('open'); backdrop.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeMenuFn() { menu.classList.remove('open'); backdrop.classList.remove('active'); document.body.style.overflow = ''; } if (toggle) toggle.addEventListener('click', openMenu); if (close) close.addEventListener('click', closeMenuFn); if (backdrop) backdrop.addEventListener('click', closeMenuFn); } function initNewsletter() { var form = $('newsletterForm'); var success = $('newsletterSuccess'); if (!form) return; form.addEventListener('submit', function(e) { e.preventDefault(); var email = form.querySelector('input[name="email"]').value; if (!email) return; fetch(API_BASE + '/api/subscribers', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email }) }).then(function(res) { if (res.ok) { success.style.display = 'block'; form.reset(); setTimeout(function() { success.style.display = 'none'; }, 4000); } else { success.style.color = '#e74c3c'; success.textContent = 'Subscription failed. Please try again.'; success.style.display = 'block'; setTimeout(function() { success.style.display = 'none'; }, 4000); } }).catch(function() { success.style.display = 'block'; setTimeout(function() { success.style.display = 'none'; }, 4000); }); }); } function initLangSwitcher() { var btn = document.getElementById('langSwitcherBtn'); var dropdown = document.getElementById('langDropdown'); if (!btn || !dropdown) return; btn.addEventListener('click', function(e) { e.stopPropagation(); dropdown.classList.toggle('open'); }); document.addEventListener('click', function() { dropdown.classList.remove('open'); }); dropdown.addEventListener('click', function(e) { if (e.target.tagName === 'A') dropdown.classList.remove('open'); }); } function init() { loadProducts(); loadHeaderMenu(); loadCategories(); loadFooterMenu(); initFAQ(); initMobileMenu(); initNewsletter(); initLangSwitcher(); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();