METRIS \u00b7 360\u00b0 chair \u00b7 premium texture 3D configurator<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <script type=\"importmap\">\r\n {\r\n \"imports\": {\r\n \"three\": \"https:\/\/unpkg.com\/three@0.128.0\/build\/three.module.js\",\r\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.128.0\/examples\/jsm\/\"\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n :root {\r\n --cream: #F0E8D8; --dark: #1F3D2B; --green: #2F5D44; --accent: #F4A259;\r\n --white: #ffffff; --shadow-sm: 0 10px 25px -8px rgba(0,0,0,0.1);\r\n --shadow-hover: 0 25px 35px -12px rgba(31,61,43,0.2);\r\n --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n html { scroll-behavior: smooth; }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: linear-gradient(145deg, var(--cream) 0%, #E8E0D0 100%);\r\n color: #1e2a1e; line-height: 1.5; overflow-x: hidden;\r\n }\r\n #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--cream); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; transition: opacity 0.5s; }\r\n .loader-spinner { width: 60px; height: 60px; border: 5px solid var(--green); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }\r\n .loader-progress { width: 200px; height: 4px; background: rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }\r\n .loader-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; animation: load 2s ease forwards; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n @keyframes load { 0% { width: 0%; } 100% { width: 100%; } }\r\n .cursor { position: fixed; width: 120px; height: 120px; background: radial-gradient(circle, rgba(244,162,89,0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 999; transition: width 0.2s, height 0.2s; mix-blend-mode: multiply; }\r\n .cursor.hover { width: 160px; height: 160px; background: radial-gradient(circle, rgba(244,162,89,0.4) 0%, transparent 80%); }\r\n nav { position: sticky; top: 0; z-index: 100; background: rgba(240, 232, 216, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(31,61,43,0.1); padding: 12px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }\r\n .logo { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; color: var(--dark); letter-spacing: -0.02em; }\r\n .nav-links { display: flex; gap: 30px; font-weight: 600; }\r\n .nav-links a { text-decoration: none; color: var(--dark); font-size: 1rem; transition: var(--transition); position: relative; }\r\n .nav-links a::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s; }\r\n .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }\r\n .nav-icons { display: flex; gap: 20px; color: var(--dark); }\r\n .nav-icons i { font-size: 1.2rem; cursor: pointer; transition: var(--transition); }\r\n .nav-icons i:hover { color: var(--accent); transform: scale(1.1); }\r\n .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }\r\n .hero { display: flex; align-items: center; justify-content: space-between; padding: 40px 40px 60px 40px; max-width: 1400px; margin: 0 auto; gap: 50px; }\r\n .hero-content { flex: 1; }\r\n .hero-content h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; color: var(--dark); line-height: 1.1; }\r\n .hero-content p { font-size: 1.2rem; color: #3a4a3a; margin: 20px 0 30px; max-width: 500px; }\r\n .hero-badge { background: var(--accent); color: #1f2a1f; font-weight: 800; font-size: 1.5rem; padding: 12px 28px; border-radius: 60% 40% 50% 30%; display: inline-block; transform: rotate(-5deg); box-shadow: 0 15px 25px rgba(244,162,89,0.3); margin-bottom: 25px; animation: pulse 2s infinite; }\r\n @keyframes pulse { 0% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.05); } 100% { transform: rotate(-5deg) scale(1); } }\r\n .hero-slider { flex: 1; min-width: 320px; max-width: 550px; position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 4 \/ 3; }\r\n .slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }\r\n .slider-slide { flex: 0 0 100%; height: 100%; }\r\n .slider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n .slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; }\r\n .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.2); cursor: pointer; transition: 0.2s; }\r\n .dot.active { background: var(--accent); transform: scale(1.2); border-color: var(--accent); }\r\n .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.5); backdrop-filter: blur(4px); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--dark); cursor: pointer; transition: 0.2s; z-index: 10; border: 1px solid rgba(255,255,255,0.8); }\r\n .slider-btn:hover { background: var(--accent); color: white; }\r\n .slider-btn.prev { left: 15px; }\r\n .slider-btn.next { right: 15px; }\r\n .btn { display: inline-block; background: var(--accent); color: #1f2a1f; font-weight: 700; padding: 14px 36px; border-radius: 60px; text-decoration: none; box-shadow: 0 12px 22px rgba(244,162,89,0.3); transition: var(--transition); border: none; cursor: pointer; font-size: 1rem; }\r\n .btn:hover { background: #e08b3f; transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 28px rgba(244,162,89,0.45); }\r\n .btn-outline { background: transparent; border: 2px solid var(--dark); box-shadow: none; color: var(--dark); }\r\n .btn-outline:hover { background: var(--dark); color: white; transform: translateY(-3px); }\r\n .section-heading { text-align: center; margin: 80px 0 40px; }\r\n .section-heading h2 { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--dark); }\r\n .section-heading p { color: #5b6f5b; font-size: 1.1rem; max-width: 600px; margin: 10px auto 0; }\r\n .featured { max-width: 1200px; margin: 0 auto; padding: 20px; }\r\n .feature-row { display: flex; align-items: center; gap: 50px; margin-bottom: 80px; flex-wrap: wrap; }\r\n .feature-row:nth-child(even) { flex-direction: row-reverse; }\r\n .feature-img-full { flex: 1 1 300px; text-align: center; }\r\n .feature-img-full img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 0; box-shadow: none; }\r\n .feature-img { flex: 1 1 300px; height: 300px; background-size: cover; background-position: center; transition: var(--transition); }\r\n .feature-img:hover { transform: scale(1.02) translateY(-8px); }\r\n .feature-content { flex: 1 1 300px; }\r\n .feature-content h3 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--dark); }\r\n .feature-content .price { font-size: 2rem; font-weight: 700; color: var(--accent); margin: 10px 0; }\r\n .feature-content p { color: #3d4f3d; margin-bottom: 20px; }\r\n .products-wrapper { max-width: 1300px; margin: 0 auto; padding: 20px; display: flex; gap: 30px; }\r\n .filter-sidebar { flex: 0 0 280px; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); border-radius: 32px; padding: 28px 20px; height: fit-content; border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-sm); position: sticky; top: 100px; }\r\n .filter-sidebar h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--dark); margin-bottom: 25px; border-bottom: 2px solid var(--accent); padding-bottom: 8px; }\r\n .filter-group { margin-bottom: 30px; }\r\n .filter-group label { font-weight: 600; color: var(--dark); display: block; margin-bottom: 12px; font-size: 1.1rem; }\r\n .filter-group input[type=\"range\"] { width: 100%; accent-color: var(--accent); }\r\n .price-values { display: flex; justify-content: space-between; font-weight: 600; color: var(--dark); margin-top: 8px; }\r\n .filter-category { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #2b3a2b; }\r\n .filter-category input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--accent); }\r\n .filter-sidebar .btn-filter { background: var(--dark); color: white; width: 100%; padding: 14px; border: none; border-radius: 60px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; margin-top: 10px; }\r\n .filter-sidebar .btn-filter:hover { background: #142e1e; transform: scale(1.02); }\r\n .product-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; }\r\n .card { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); border-radius: 24px; padding: 20px 14px; text-align: center; position: relative; transition: var(--transition); border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-sm); overflow: hidden; }\r\n .card:hover { transform: translateY(-12px) scale(1.02); box-shadow: var(--shadow-hover); }\r\n .card-badge { position: absolute; top: 16px; right: 16px; background: var(--accent); color: #1f2a1f; font-weight: 800; font-size: 0.9rem; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(6deg); transition: 0.2s; }\r\n .card:hover .card-badge { transform: rotate(0deg) scale(1.05); }\r\n .card-img { width: 100%; height: 160px; background: linear-gradient(145deg, #6F9B7A, var(--green)); border-radius: 20px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; transition: var(--transition); }\r\n .card:hover .card-img { transform: scale(0.98); }\r\n .card h3 { font-size: 1.7rem; font-family: 'Playfair Display', serif; color: var(--dark); }\r\n .card p { color: #5a6b5a; margin: 8px 0; font-size: 0.95rem; }\r\n .card-price { font-size: 1.7rem; font-weight: 700; color: var(--dark); }\r\n .card-price span { font-size: 1rem; color: var(--green); text-decoration: line-through; margin-left: 8px; }\r\n .btn-small { margin-top: 12px; display: inline-block; padding: 8px 20px; border: 1px solid var(--green); border-radius: 40px; text-decoration: none; color: var(--dark); transition: 0.2s; }\r\n .btn-small:hover { background: var(--green); color: white; }\r\n .testimonial { background: var(--dark); color: var(--cream); border-radius: 100px 20px 100px 20px; max-width: 1000px; margin: 100px auto; padding: 60px 40px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }\r\n .testimonial-content { flex: 2; }\r\n .testimonial-content i { font-size: 3rem; color: var(--accent); opacity: 0.5; margin-bottom: 20px; }\r\n .testimonial-content p { font-size: 1.6rem; font-style: italic; line-height: 1.4; }\r\n .testimonial-author { display: block; margin-top: 20px; color: #b9cfb9; font-weight: 500; }\r\n .testimonial-avatar { flex: 1; min-width: 150px; height: 150px; background: var(--green); border-radius: 50% 20% 50% 20%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--cream); }\r\n .chair-3d-section {\r\n max-width: 1300px;\r\n margin: 80px auto;\r\n padding: 40px 30px;\r\n background: rgba(255,255,255,0.3);\r\n backdrop-filter: blur(8px);\r\n border-radius: 48px;\r\n border: 1px solid rgba(255,255,255,0.4);\r\n box-shadow: var(--shadow-sm);\r\n }\r\n .chair-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n .viewer-3d {\r\n flex: 1.2;\r\n min-width: 300px;\r\n height: 450px;\r\n background: rgba(0,0,0,0.02);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n cursor: grab;\r\n }\r\n .viewer-3d:active { cursor: grabbing; }\r\n .chair-controls {\r\n flex: 0.8;\r\n min-width: 260px;\r\n background: rgba(255,255,255,0.5);\r\n backdrop-filter: blur(8px);\r\n border-radius: 32px;\r\n padding: 28px 24px;\r\n border: 1px solid rgba(255,255,255,0.6);\r\n }\r\n .chair-controls h3 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 2rem;\r\n color: var(--dark);\r\n margin-bottom: 20px;\r\n }\r\n .option-group {\r\n margin-bottom: 24px;\r\n }\r\n .option-group label {\r\n font-weight: 600;\r\n display: block;\r\n margin-bottom: 8px;\r\n color: var(--dark);\r\n }\r\n .units-selector {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .unit-btn {\r\n background: var(--cream);\r\n border: 1px solid var(--dark);\r\n padding: 8px 16px;\r\n border-radius: 40px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n font-weight: 600;\r\n }\r\n .unit-btn.active, .unit-btn:hover {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: #1f2a1f;\r\n }\r\n .price-display {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--accent);\r\n margin: 8px 0;\r\n }\r\n select, .color-option {\r\n width: 100%;\r\n padding: 10px 14px;\r\n border-radius: 60px;\r\n border: 1px solid rgba(0,0,0,0.1);\r\n background: white;\r\n font-family: inherit;\r\n font-size: 1rem;\r\n }\r\n .send-request {\r\n background: var(--dark);\r\n color: white;\r\n width: 100%;\r\n padding: 14px;\r\n border: none;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n margin-top: 20px;\r\n }\r\n .send-request:hover {\r\n background: var(--accent);\r\n color: #1f2a1f;\r\n transform: scale(1.02);\r\n }\r\n .newsletter { background: #e6dbc9; border-radius: 80px 20px 80px 20px; max-width: 800px; margin: 80px auto; padding: 60px 40px; text-align: center; }\r\n .newsletter h3 { font-family: 'Playfair Display', serif; font-size: 2.4rem; color: var(--dark); }\r\n .newsletter p { color: #4e624e; margin: 20px 0; }\r\n .form-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 500px; margin: 0 auto; }\r\n .form-group input { flex: 3 1 260px; padding: 16px 24px; border: none; border-radius: 60px; font-size: 1rem; background: white; border: 1px solid #dbd3c0; }\r\n .form-group button { flex: 1 1 auto; padding: 16px 32px; border: none; background: var(--accent); border-radius: 60px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; }\r\n .form-group button:hover { background: #e08b3f; transform: scale(1.02); }\r\n footer { background: rgba(31,61,43,0.9); backdrop-filter: blur(8px); color: var(--cream); padding: 50px 20px 20px; margin-top: 100px; }\r\n .footer-content { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }\r\n .footer-col h4 { font-size: 1.2rem; margin-bottom: 20px; color: var(--accent); letter-spacing: 1px; }\r\n .footer-col p, .footer-col a { color: #ddd; text-decoration: none; margin: 10px 0; display: block; transition: 0.2s; font-size: 0.95rem; }\r\n .footer-col a:hover { color: var(--accent); transform: translateX(5px); }\r\n .social-icons { display: flex; gap: 18px; font-size: 1.5rem; margin-top: 15px; }\r\n .social-icons i { cursor: pointer; transition: var(--transition); }\r\n .social-icons i:hover { color: var(--accent); transform: translateY(-3px); }\r\n .payment-methods { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }\r\n .payment-methods i { font-size: 2rem; color: #ccc; transition: 0.2s; }\r\n .payment-methods i:hover { color: var(--accent); }\r\n .trust-badge { background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 5px 0; border: 1px solid rgba(255,255,255,0.1); }\r\n .trust-badge i { color: var(--accent); }\r\n .app-badges { display: flex; gap: 12px; margin-top: 15px; flex-wrap: wrap; }\r\n .app-badge { background: #2f4d3a; padding: 8px 16px; border-radius: 40px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: white; transition: 0.2s; }\r\n .app-badge i { font-size: 1.2rem; }\r\n .app-badge:hover { background: var(--accent); color: #1f2a1f; transform: scale(1.05); }\r\n .footer-bottom { text-align: center; padding-top: 40px; font-size: 0.9rem; color: #aaa; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; max-width: 1300px; margin-left: auto; margin-right: auto; }\r\n .footer-bottom-links a { color: #ccc; margin-left: 20px; text-decoration: none; font-size: 0.9rem; }\r\n .footer-bottom-links a:hover { color: var(--accent); }\r\n #backToTop { position: fixed; bottom: 40px; right: 40px; background: var(--accent); color: #1f2a1f; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: var(--transition); opacity: 0; visibility: hidden; z-index: 99; }\r\n #backToTop.show { opacity: 1; visibility: visible; }\r\n #backToTop:hover { transform: translateY(-5px); background: #e08b3f; }\r\n .reveal { opacity: 0; transform: translateY(60px); transition: all 0.8s ease; }\r\n .reveal.active { opacity: 1; transform: translateY(0); }\r\n @media (max-width: 900px) {\r\n .hero { flex-direction: column; text-align: center; }\r\n .hero-content p { margin-left: auto; margin-right: auto; }\r\n .hero-slider { max-width: 100%; }\r\n .nav-links { display: none; }\r\n .menu-toggle { display: block; }\r\n .feature-row { flex-direction: column !important; text-align: center; }\r\n .chair-container { flex-direction: column; }\r\n .viewer-3d { height: 350px; }\r\n }\r\n @media (max-width: 500px) { nav { padding: 12px 20px; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"loader\"><div class=\"loader-spinner\"><\/div><div class=\"loader-progress\"><div class=\"loader-bar\"><\/div><\/div><\/div>\r\n<div class=\"cursor\"><\/div>\r\n<nav>\r\n <div class=\"logo\">METRIS<\/div>\r\n <div class=\"nav-links\"><a href=\"#home\" class=\"active\">Home<\/a><a href=\"#featured\">Featured<\/a><a href=\"#products\">Products<\/a><a href=\"#testimonial\">Testimonial<\/a><a href=\"#contact\">Contact<\/a><\/div>\r\n <div class=\"nav-icons\"><i class=\"fas fa-search\"><\/i><i class=\"fas fa-shopping-cart\"><\/i><i class=\"fas fa-user\"><\/i><\/div>\r\n <div class=\"menu-toggle\"><i class=\"fas fa-bars\"><\/i><\/div>\r\n<\/nav>\r\n<section id=\"home\" class=\"hero\">\r\n <div class=\"hero-content reveal\"><span class=\"hero-badge\">30% OFF<\/span><h1>Crafted Luxury <br>For Your Home<\/h1><p>Handmade natural wood furniture that brings warmth and elegance to every space.<\/p><a href=\"#\" class=\"btn\">Explore Collection <i class=\"fas fa-arrow-right\" style=\"margin-left: 8px;\"><\/i><\/a><\/div>\r\n <div class=\"hero-slider reveal\"><div class=\"slider-track\" id=\"sliderTrack\"><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled.png\" alt=\"Furniture 1\"><\/div><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-1.png\" alt=\"Furniture 2\"><\/div><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-2.png\" alt=\"Furniture 3\"><\/div><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-3.png\" alt=\"Furniture 4\"><\/div><\/div><div class=\"slider-btn prev\" id=\"prevSlide\"><i class=\"fas fa-chevron-left\"><\/i><\/div><div class=\"slider-btn next\" id=\"nextSlide\"><i class=\"fas fa-chevron-right\"><\/i><\/div><div class=\"slider-dots\" id=\"sliderDots\"><span class=\"dot active\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div><\/div>\r\n<\/section>\r\n<section id=\"featured\" class=\"featured\"><div class=\"section-heading reveal\"><h2>This Week's Featured<\/h2><p>Handpicked just for you<\/p><\/div><div class=\"feature-row reveal\"><div class=\"feature-img-full\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-5.png\" alt=\"Ogilvy Lamp\"><\/div><div class=\"feature-content\"><h3>Ogilvy<\/h3><div class=\"price\">$249<\/div><p>Table Lamp with antique brass finish.<\/p><a href=\"#\" class=\"btn btn-outline\">View Details<\/a><\/div><\/div><div class=\"feature-row reveal\"><div class=\"feature-img\" style=\"background-image: linear-gradient(145deg, #6F9B7A, #2F5D44), url('https:\/\/placehold.co\/600x400\/1F3D2B\/white?text=Arais+Chair'); background-blend-mode: overlay; background-size: cover;\"><\/div><div class=\"feature-content\"><h3>Arais<\/h3><div class=\"price\">$450<\/div><p>Velvet dining chair with black legs.<\/p><a href=\"#\" class=\"btn btn-outline\">View Details<\/a><\/div><\/div><\/section>\r\n<section id=\"products\"><div class=\"section-heading reveal\"><h2>All Products<\/h2><p>refine by price & category<\/p><\/div><div class=\"products-wrapper\"><aside class=\"filter-sidebar reveal\"><h3>Filter<\/h3><div class=\"filter-group\"><label>Max price <span id=\"maxPriceValue\">$1200<\/span><\/label><input type=\"range\" id=\"priceRange\" min=\"0\" max=\"2000\" value=\"1200\" step=\"10\"><div class=\"price-values\"><span>$0<\/span><span>$2000+<\/span><\/div><\/div><div class=\"filter-group\" id=\"categoryGroup\"><label>Categories<\/label><div class=\"filter-category\"><input type=\"checkbox\" value=\"bed\"> Beds<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"sofa\"> Seating<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"table\"> Tables<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"storage\"> Storage<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"lighting\"> Lighting<\/div><\/div><div class=\"filter-group\" id=\"materialGroup\"><label>Material<\/label><div class=\"filter-category\"><input type=\"checkbox\" value=\"wood\"> Wood<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"metal\"> Metal<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"velvet\"> Velvet<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"glass\"> Glass<\/div><\/div><div style=\"display: flex; gap: 10px; margin-top: 10px;\"><button class=\"btn-filter\" id=\"applyFilterBtn\" style=\"flex:2\">APPLY<\/button><button class=\"btn-filter\" id=\"resetFilterBtn\" style=\"flex:1; background: var(--accent); color: #1f2a1f;\">RESET<\/button><\/div><p id=\"filterStatus\" style=\"margin-top: 15px; font-size: 0.9rem;\"><\/p><\/aside><div class=\"product-grid\" id=\"productGrid\"><div class=\"card reveal\" data-price=\"1290\" data-category=\"bed\" data-material=\"wood\"><div class=\"card-badge\">-15%<\/div><div class=\"card-img\"><i class=\"fas fa-bed\"><\/i><\/div><h3>Haru<\/h3><p>Single sable bed<\/p><div class=\"card-price\">$1,290 <span>$1,499<\/span><\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"850\" data-category=\"sofa\" data-material=\"velvet\"><div class=\"card-badge\">new<\/div><div class=\"card-img\"><i class=\"fas fa-couch\"><\/i><\/div><h3>Hettie<\/h3><p>Sofa bed, moss green<\/p><div class=\"card-price\">$850<\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"420\" data-category=\"table\" data-material=\"metal\"><div class=\"card-badge\">$32<\/div><div class=\"card-img\"><i class=\"fas fa-table\"><\/i><\/div><h3>Ebro<\/h3><p>Bedside table, gold<\/p><div class=\"card-price\">$420<\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"890\" data-category=\"table\" data-material=\"wood\"><div class=\"card-badge\">-10%<\/div><div class=\"card-img\"><i class=\"fas fa-utensils\"><\/i><\/div><h3>Dione<\/h3><p>Dining table, oak<\/p><div class=\"card-price\">$890 <span>$990<\/span><\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"650\" data-category=\"table\" data-material=\"wood\"><div class=\"card-badge\">-20%<\/div><div class=\"card-img\"><i class=\"fas fa-chess-board\"><\/i><\/div><h3>Kumo<\/h3><p>Minimalist desk, walnut<\/p><div class=\"card-price\">$650 <span>$810<\/span><\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"1150\" data-category=\"storage\" data-material=\"wood\"><div class=\"card-badge\">new<\/div><div class=\"card-img\"><i class=\"fas fa-archive\"><\/i><\/div><h3>Nimbus<\/h3><p>Storage cabinet, 2 doors<\/p><div class=\"card-price\">$1,150<\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><\/div><\/div><\/section>\r\n<section id=\"testimonial\" class=\"testimonial reveal\"><div class=\"testimonial-content\"><i class=\"fas fa-quote-left\"><\/i><p>Excellent product, delivered sooner than said. Ilaria lamp looks beautiful.<\/p><span class=\"testimonial-author\">\u2014 M. Chen, verified buyer<\/span><\/div><div class=\"testimonial-avatar\"><i class=\"fas fa-user-circle\"><\/i><\/div><\/section>\r\n\r\n\r\n<div class=\"chair-3d-section reveal\">\r\n <div class=\"chair-container\">\r\n <div class=\"viewer-3d\" id=\"chairViewer\"><\/div>\r\n <div class=\"chair-controls\">\r\n <h3>Eero Armchair<\/h3>\r\n <div class=\"option-group\"><label>Units<\/label><div class=\"units-selector\" id=\"unitSelector\"><span class=\"unit-btn\" data-units=\"5\">5<\/span><span class=\"unit-btn\" data-units=\"6\">6<\/span><span class=\"unit-btn active\" data-units=\"7\">7<\/span><span class=\"unit-btn\" data-units=\"8\">8<\/span><span class=\"unit-btn\" data-units=\"9\">9<\/span><\/div><\/div>\r\n <div class=\"option-group\"><label>Price<\/label><div class=\"price-display\" id=\"priceDisplay\">$340<\/div><\/div>\r\n <div class=\"option-group\"><label>Colour (tint)<\/label><select id=\"colourSelect\"><option value=\"#2F5D44\">Forest Green<\/option><option value=\"#F4A259\">Terracotta<\/option><option value=\"#1F3D2B\">Dark Oak<\/option><option value=\"#D9C5A7\">Sand Beige<\/option><\/select><\/div>\r\n <div class=\"option-group\"><label>Material finish<\/label><select id=\"materialSelect\"><option value=\"velvet\">Velvet (soft)<\/option><option value=\"linen\">Linen (textured)<\/option><option value=\"leather\">Leather (smooth)<\/option><option value=\"wool\">Wool (matte)<\/option><\/select><\/div>\r\n <div class=\"option-group\"><label>Base<\/label><select id=\"baseSelect\"><option value=\"black\">Black Steel<\/option><option value=\"brass\">Brass<\/option><option value=\"chrome\">Chrome<\/option><option value=\"wood\">Walnut Wood<\/option><\/select><\/div>\r\n <div class=\"option-group\"><label>Style<\/label><select id=\"styleSelect\"><option value=\"modern\">Modern<\/option><option value=\"scandinavian\">Scandinavian<\/option><option value=\"industrial\">Industrial<\/option><option value=\"midcentury\">Mid\u2011Century<\/option><\/select><\/div>\r\n <button class=\"send-request\" id=\"sendRequestBtn\">SEND REQUEST<\/button>\r\n <p style=\"font-size:0.75rem; margin-top:12px; color:#4f6b4f;\"><i class=\"fas fa-palette\"><\/i> Premium fabric texture applied<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"newsletter reveal\"><h3>Subscribe to Our Newsletter<\/h3><p>Get exclusive offers and early access to new collections.<\/p><div class=\"form-group\"><input type=\"email\" placeholder=\"Your email address\"><button>Subscribe Now<\/button><\/div><\/div>\r\n<footer id=\"contact\"><div class=\"footer-content\"><div class=\"footer-col\"><h4>METRIS<\/h4><p>Smart furniture for modern living. Est. 2025<\/p><div class=\"social-icons\"><i class=\"fab fa-instagram\"><\/i><i class=\"fab fa-facebook-f\"><\/i><i class=\"fab fa-pinterest\"><\/i><i class=\"fab fa-x-twitter\"><\/i><\/div><div class=\"trust-badge\"><i class=\"fas fa-shield-alt\"><\/i> 100% secure checkout<\/div><div class=\"trust-badge\"><i class=\"fas fa-tree\"><\/i> Eco-friendly materials<\/div><\/div><div class=\"footer-col\"><h4>Shop<\/h4><a href=\"#\">Living room<\/a><a href=\"#\">Bedroom<\/a><a href=\"#\">Dining<\/a><a href=\"#\">Lighting<\/a><a href=\"#\">Accessories<\/a><\/div><div class=\"footer-col\"><h4>Company<\/h4><a href=\"#\">About Us<\/a><a href=\"#\">Sustainability<\/a><a href=\"#\">Showroom<\/a><a href=\"#\">Careers<\/a><a href=\"#\">Contact<\/a><\/div><div class=\"footer-col\"><h4>Support<\/h4><a href=\"#\">FAQ<\/a><a href=\"#\">Shipping & returns<\/a><a href=\"#\">Warranty<\/a><a href=\"#\">Assembly guides<\/a><a href=\"#\">Privacy policy<\/a><\/div><div class=\"footer-col\"><h4>Download app<\/h4><div class=\"app-badges\"><span class=\"app-badge\"><i class=\"fab fa-apple\"><\/i> App Store<\/span><span class=\"app-badge\"><i class=\"fab fa-google-play\"><\/i> Google Play<\/span><\/div><h4 style=\"margin-top: 25px;\">We accept<\/h4><div class=\"payment-methods\"><i class=\"fab fa-cc-visa\"><\/i><i class=\"fab fa-cc-mastercard\"><\/i><i class=\"fab fa-cc-amex\"><\/i><i class=\"fab fa-cc-paypal\"><\/i><i class=\"fab fa-cc-apple-pay\"><\/i><\/div><\/div><\/div><div class=\"footer-bottom\"><span>\u00a9 2025 METRIS \u2014 naturally inspired living<\/span><div class=\"footer-bottom-links\"><a href=\"#\">Sitemap<\/a><a href=\"#\">Terms<\/a><a href=\"#\">Privacy<\/a><a href=\"#\">Cookies<\/a><\/div><\/div><\/footer>\r\n<div id=\"backToTop\" title=\"Back to top\"><i class=\"fas fa-chevron-up\"><\/i><\/div>\r\n\r\n<script type=\"module\">\r\n import * as THREE from 'three';\r\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\r\n\r\n const container = document.getElementById('chairViewer');\r\n const scene = new THREE.Scene();\r\n scene.background = new THREE.Color(0xf0e8d8);\r\n const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\r\n camera.position.set(3, 2, 4);\r\n camera.lookAt(0, 0.8, 0);\r\n const renderer = new THREE.WebGLRenderer({ antialias: true });\r\n renderer.setSize(container.clientWidth, container.clientHeight);\r\n renderer.shadowMap.enabled = true;\r\n container.appendChild(renderer.domElement);\r\n const controls = new OrbitControls(camera, renderer.domElement);\r\n controls.enableDamping = true; controls.dampingFactor = 0.05; controls.autoRotate = false; controls.enableZoom = true; controls.target.set(0, 0.8, 0);\r\n\r\n \/\/ lighting\r\n const ambientLight = new THREE.AmbientLight(0x404060); scene.add(ambientLight);\r\n const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(2, 3, 2); dirLight.castShadow = true; scene.add(dirLight);\r\n const fillLight = new THREE.PointLight(0xc0a080, 0.4); fillLight.position.set(0, -1, 0); scene.add(fillLight);\r\n const rimLight = new THREE.PointLight(0xffaa66, 0.6); rimLight.position.set(-1, 1.5, -1.5); scene.add(rimLight);\r\n\r\n const chairGroup = new THREE.Group();\r\n \/\/ geometries\r\n const seatGeo = new THREE.BoxGeometry(0.9, 0.12, 0.85);\r\n const backGeo = new THREE.BoxGeometry(0.9, 0.65, 0.08);\r\n const armGeo = new THREE.BoxGeometry(0.12, 0.1, 0.7);\r\n const cushionGeo = new THREE.BoxGeometry(0.75, 0.45, 0.05);\r\n const legMatDefault = new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.7, roughness: 0.3 });\r\n \r\n const seat = new THREE.Mesh(seatGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n seat.position.set(0, 0.4, 0); seat.castShadow = true;\r\n const back = new THREE.Mesh(backGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n back.position.set(0, 0.8, -0.42); back.castShadow = true;\r\n const leftArm = new THREE.Mesh(armGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n leftArm.position.set(-0.55, 0.65, 0); leftArm.castShadow = true;\r\n const rightArm = new THREE.Mesh(armGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n rightArm.position.set(0.55, 0.65, 0); rightArm.castShadow = true;\r\n const cushionDeco = new THREE.Mesh(cushionGeo, new THREE.MeshStandardMaterial({ color: 0xF4A259, roughness: 0.5 }));\r\n cushionDeco.position.set(0, 0.75, -0.38); cushionDeco.castShadow = true;\r\n \r\n chairGroup.add(seat, back, leftArm, rightArm, cushionDeco);\r\n const legPositions = [[-0.4, 0.1, -0.4], [0.4, 0.1, -0.4], [-0.4, 0.1, 0.4], [0.4, 0.1, 0.4]];\r\n legPositions.forEach(pos => { const leg = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.35, 8), legMatDefault); leg.position.set(pos[0], pos[1], pos[2]); leg.castShadow = true; chairGroup.add(leg); });\r\n scene.add(chairGroup);\r\n const planeHelper = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.ShadowMaterial({ opacity: 0.3, color: 0x000000, transparent: true, side: THREE.DoubleSide }));\r\n planeHelper.rotation.x = -Math.PI \/ 2; planeHelper.position.y = -0.05; planeHelper.receiveShadow = true; scene.add(planeHelper);\r\n\r\n \/\/ fabric parts array\r\n const fabricParts = [seat, back, leftArm, rightArm, cushionDeco];\r\n let fabricTexture = null;\r\n const textureLoader = new THREE.TextureLoader();\r\n \/\/ Load the specific image for the chair (360\u00b0 interactive texture)\r\n textureLoader.load('https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-1.png', \r\n (tex) => {\r\n fabricTexture = tex;\r\n fabricTexture.wrapS = THREE.RepeatWrapping;\r\n fabricTexture.wrapT = THREE.RepeatWrapping;\r\n fabricTexture.repeat.set(1.2, 1.2);\r\n \/\/ apply texture to all fabric parts\r\n fabricParts.forEach(part => {\r\n if (part.material) {\r\n const newMat = new THREE.MeshStandardMaterial({ map: fabricTexture, color: document.getElementById('colourSelect').value, roughness: 0.4, metalness: 0.05 });\r\n part.material.dispose();\r\n part.material = newMat;\r\n }\r\n });\r\n \/\/ re-sync material properties based on current selections\r\n updateMaterialFinish(document.getElementById('materialSelect').value);\r\n updateBaseColor(document.getElementById('baseSelect').value);\r\n },\r\n undefined,\r\n (err) => console.warn(\"texture loading fallback, using color only\", err)\r\n );\r\n\r\n function updateChairTint(colorHex) {\r\n if (!fabricTexture) return;\r\n fabricParts.forEach(part => { if (part.material) part.material.color.set(colorHex); });\r\n }\r\n function updateMaterialFinish(materialType) {\r\n if (!fabricTexture) return;\r\n let roughnessVal = 0.4, metalnessVal = 0.05;\r\n if (materialType === 'velvet') { roughnessVal = 0.28; metalnessVal = 0.02; }\r\n else if (materialType === 'linen') { roughnessVal = 0.72; metalnessVal = 0.0; }\r\n else if (materialType === 'leather') { roughnessVal = 0.25; metalnessVal = 0.12; }\r\n else if (materialType === 'wool') { roughnessVal = 0.68; metalnessVal = 0.0; }\r\n fabricParts.forEach(part => { if (part.material) { part.material.roughness = roughnessVal; part.material.metalness = metalnessVal; } });\r\n }\r\n function updateBaseColor(baseType) {\r\n let legColor = 0x333333;\r\n if (baseType === 'brass') legColor = 0xcc8844;\r\n else if (baseType === 'chrome') legColor = 0xccccdd;\r\n else if (baseType === 'wood') legColor = 0x8b5a2b;\r\n chairGroup.children.forEach(child => { if (child.geometry && child.geometry.type === 'CylinderGeometry' && child.material) child.material.color.setHex(legColor); });\r\n }\r\n document.getElementById('colourSelect').addEventListener('change', (e) => updateChairTint(e.target.value));\r\n document.getElementById('materialSelect').addEventListener('change', (e) => updateMaterialFinish(e.target.value));\r\n document.getElementById('baseSelect').addEventListener('change', (e) => updateBaseColor(e.target.value));\r\n \r\n \/\/ price & units logic\r\n const basePrice = 340;\r\n const priceDisplay = document.getElementById('priceDisplay');\r\n function updatePrice(units) { priceDisplay.textContent = `$${basePrice * units}`; }\r\n document.querySelectorAll('.unit-btn').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.unit-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n updatePrice(parseInt(btn.dataset.units, 10));\r\n });\r\n });\r\n updatePrice(7);\r\n document.getElementById('sendRequestBtn').addEventListener('click', () => alert('\u2713 Request sent! Our design team will reach out within 24h.'));\r\n \r\n function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }\r\n animate();\r\n window.addEventListener('resize', () => { const w = container.clientWidth, h = container.clientHeight; camera.aspect = w \/ h; camera.updateProjectionMatrix(); renderer.setSize(w, h); });\r\n<\/script>\r\n\r\n<script>\r\n (function() {\r\n window.addEventListener('load', () => { setTimeout(() => { const l=document.getElementById('loader'); l.style.opacity='0'; setTimeout(()=>l.style.display='none',500); }, 1800); });\r\n const cursor = document.querySelector('.cursor');\r\n document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; });\r\n const hoverItems = document.querySelectorAll('a, button, .btn, .card, .nav-icons i, .social-icons i, .unit-btn, .send-request');\r\n hoverItems.forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); });\r\n const reveals = document.querySelectorAll('.reveal');\r\n new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('active'); }); }, { threshold: 0.1 }).observe(document.querySelector('.reveal'));\r\n reveals.forEach(r => new IntersectionObserver(([entry]) => { if(entry.isIntersecting) entry.target.classList.add('active'); }, { threshold: 0.1 }).observe(r));\r\n const backBtn = document.getElementById('backToTop');\r\n window.addEventListener('scroll', () => { window.scrollY > 600 ? backBtn.classList.add('show') : backBtn.classList.remove('show'); });\r\n backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\r\n document.querySelector('.menu-toggle').addEventListener('click', () => alert('Mobile navigation \u2014 full menu would expand here.'));\r\n \/\/ slider\r\n const track = document.getElementById('sliderTrack'), slides = document.querySelectorAll('.slider-slide'), dots = document.querySelectorAll('.dot'), prev = document.getElementById('prevSlide'), next = document.getElementById('nextSlide');\r\n let idx = 0, total = slides.length;\r\n function updateSlider(i) { i = (i + total) % total; track.style.transform = `translateX(-${i * 100}%)`; dots.forEach((d, n) => d.classList.toggle('active', n === i)); idx = i; }\r\n prev.addEventListener('click', () => updateSlider(idx - 1)); next.addEventListener('click', () => updateSlider(idx + 1)); dots.forEach((d, i) => d.addEventListener('click', () => updateSlider(i)));\r\n setInterval(() => updateSlider(idx + 1), 5000);\r\n \/\/ product filter\r\n const priceRange = document.getElementById('priceRange'), maxSpan = document.getElementById('maxPriceValue'), applyBtn = document.getElementById('applyFilterBtn'), resetBtn = document.getElementById('resetFilterBtn'), statusSpan = document.getElementById('filterStatus');\r\n const catBoxes = document.querySelectorAll('#categoryGroup input'), matBoxes = document.querySelectorAll('#materialGroup input'), cards = document.querySelectorAll('.card');\r\n function updateLabel() { maxSpan.textContent = '$' + priceRange.value; }\r\n priceRange.addEventListener('input', updateLabel); updateLabel();\r\n function getSelected(arr) { return Array.from(arr).filter(cb => cb.checked).map(cb => cb.value); }\r\n function apply() { const max = parseInt(priceRange.value), cats = getSelected(catBoxes), mats = getSelected(matBoxes); let visible = 0; cards.forEach(c => { const price = parseInt(c.dataset.price), category = c.dataset.category, material = c.dataset.material; const ok = price <= max && (cats.length===0||cats.includes(category)) && (mats.length===0||mats.includes(material)); c.style.display = ok ? '' : 'none'; if(ok) visible++; }); statusSpan.textContent = `${visible} product(s) visible`; }\r\n function reset() { priceRange.value = 1200; updateLabel(); catBoxes.forEach(cb=>cb.checked=false); matBoxes.forEach(cb=>cb.checked=false); apply(); }\r\n applyBtn.addEventListener('click', apply); resetBtn.addEventListener('click', reset); apply();\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>METRIS \u00b7 360\u00b0 chair \u00b7 premium texture 3D configurator METRIS HomeFeaturedProductsTestimonialContact 30% OFF Crafted Luxury For Your Home Handmade natural […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1084","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/1084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/comments?post=1084"}],"version-history":[{"count":127,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/1084\/revisions"}],"predecessor-version":[{"id":1233,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/1084\/revisions\/1233"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=1084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n METRIS \u00b7 360\u00b0 chair \u00b7 premium texture 3D configurator<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700;900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <script type=\"importmap\">\r\n {\r\n \"imports\": {\r\n \"three\": \"https:\/\/unpkg.com\/three@0.128.0\/build\/three.module.js\",\r\n \"three\/addons\/\": \"https:\/\/unpkg.com\/three@0.128.0\/examples\/jsm\/\"\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n * { margin: 0; padding: 0; box-sizing: border-box; }\r\n :root {\r\n --cream: #F0E8D8; --dark: #1F3D2B; --green: #2F5D44; --accent: #F4A259;\r\n --white: #ffffff; --shadow-sm: 0 10px 25px -8px rgba(0,0,0,0.1);\r\n --shadow-hover: 0 25px 35px -12px rgba(31,61,43,0.2);\r\n --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n html { scroll-behavior: smooth; }\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: linear-gradient(145deg, var(--cream) 0%, #E8E0D0 100%);\r\n color: #1e2a1e; line-height: 1.5; overflow-x: hidden;\r\n }\r\n #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--cream); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; transition: opacity 0.5s; }\r\n .loader-spinner { width: 60px; height: 60px; border: 5px solid var(--green); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; }\r\n .loader-progress { width: 200px; height: 4px; background: rgba(0,0,0,0.1); border-radius: 4px; overflow: hidden; }\r\n .loader-bar { height: 100%; width: 0%; background: var(--accent); border-radius: 4px; animation: load 2s ease forwards; }\r\n @keyframes spin { to { transform: rotate(360deg); } }\r\n @keyframes load { 0% { width: 0%; } 100% { width: 100%; } }\r\n .cursor { position: fixed; width: 120px; height: 120px; background: radial-gradient(circle, rgba(244,162,89,0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 999; transition: width 0.2s, height 0.2s; mix-blend-mode: multiply; }\r\n .cursor.hover { width: 160px; height: 160px; background: radial-gradient(circle, rgba(244,162,89,0.4) 0%, transparent 80%); }\r\n nav { position: sticky; top: 0; z-index: 100; background: rgba(240, 232, 216, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(31,61,43,0.1); padding: 12px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }\r\n .logo { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; color: var(--dark); letter-spacing: -0.02em; }\r\n .nav-links { display: flex; gap: 30px; font-weight: 600; }\r\n .nav-links a { text-decoration: none; color: var(--dark); font-size: 1rem; transition: var(--transition); position: relative; }\r\n .nav-links a::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s; }\r\n .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }\r\n .nav-icons { display: flex; gap: 20px; color: var(--dark); }\r\n .nav-icons i { font-size: 1.2rem; cursor: pointer; transition: var(--transition); }\r\n .nav-icons i:hover { color: var(--accent); transform: scale(1.1); }\r\n .menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }\r\n .hero { display: flex; align-items: center; justify-content: space-between; padding: 40px 40px 60px 40px; max-width: 1400px; margin: 0 auto; gap: 50px; }\r\n .hero-content { flex: 1; }\r\n .hero-content h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; color: var(--dark); line-height: 1.1; }\r\n .hero-content p { font-size: 1.2rem; color: #3a4a3a; margin: 20px 0 30px; max-width: 500px; }\r\n .hero-badge { background: var(--accent); color: #1f2a1f; font-weight: 800; font-size: 1.5rem; padding: 12px 28px; border-radius: 60% 40% 50% 30%; display: inline-block; transform: rotate(-5deg); box-shadow: 0 15px 25px rgba(244,162,89,0.3); margin-bottom: 25px; animation: pulse 2s infinite; }\r\n @keyframes pulse { 0% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(-3deg) scale(1.05); } 100% { transform: rotate(-5deg) scale(1); } }\r\n .hero-slider { flex: 1; min-width: 320px; max-width: 550px; position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 4 \/ 3; }\r\n .slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }\r\n .slider-slide { flex: 0 0 100%; height: 100%; }\r\n .slider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n .slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 10; }\r\n .dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.2); cursor: pointer; transition: 0.2s; }\r\n .dot.active { background: var(--accent); transform: scale(1.2); border-color: var(--accent); }\r\n .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.5); backdrop-filter: blur(4px); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--dark); cursor: pointer; transition: 0.2s; z-index: 10; border: 1px solid rgba(255,255,255,0.8); }\r\n .slider-btn:hover { background: var(--accent); color: white; }\r\n .slider-btn.prev { left: 15px; }\r\n .slider-btn.next { right: 15px; }\r\n .btn { display: inline-block; background: var(--accent); color: #1f2a1f; font-weight: 700; padding: 14px 36px; border-radius: 60px; text-decoration: none; box-shadow: 0 12px 22px rgba(244,162,89,0.3); transition: var(--transition); border: none; cursor: pointer; font-size: 1rem; }\r\n .btn:hover { background: #e08b3f; transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 28px rgba(244,162,89,0.45); }\r\n .btn-outline { background: transparent; border: 2px solid var(--dark); box-shadow: none; color: var(--dark); }\r\n .btn-outline:hover { background: var(--dark); color: white; transform: translateY(-3px); }\r\n .section-heading { text-align: center; margin: 80px 0 40px; }\r\n .section-heading h2 { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--dark); }\r\n .section-heading p { color: #5b6f5b; font-size: 1.1rem; max-width: 600px; margin: 10px auto 0; }\r\n .featured { max-width: 1200px; margin: 0 auto; padding: 20px; }\r\n .feature-row { display: flex; align-items: center; gap: 50px; margin-bottom: 80px; flex-wrap: wrap; }\r\n .feature-row:nth-child(even) { flex-direction: row-reverse; }\r\n .feature-img-full { flex: 1 1 300px; text-align: center; }\r\n .feature-img-full img { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 0; box-shadow: none; }\r\n .feature-img { flex: 1 1 300px; height: 300px; background-size: cover; background-position: center; transition: var(--transition); }\r\n .feature-img:hover { transform: scale(1.02) translateY(-8px); }\r\n .feature-content { flex: 1 1 300px; }\r\n .feature-content h3 { font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--dark); }\r\n .feature-content .price { font-size: 2rem; font-weight: 700; color: var(--accent); margin: 10px 0; }\r\n .feature-content p { color: #3d4f3d; margin-bottom: 20px; }\r\n .products-wrapper { max-width: 1300px; margin: 0 auto; padding: 20px; display: flex; gap: 30px; }\r\n .filter-sidebar { flex: 0 0 280px; background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); border-radius: 32px; padding: 28px 20px; height: fit-content; border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-sm); position: sticky; top: 100px; }\r\n .filter-sidebar h3 { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--dark); margin-bottom: 25px; border-bottom: 2px solid var(--accent); padding-bottom: 8px; }\r\n .filter-group { margin-bottom: 30px; }\r\n .filter-group label { font-weight: 600; color: var(--dark); display: block; margin-bottom: 12px; font-size: 1.1rem; }\r\n .filter-group input[type=\"range\"] { width: 100%; accent-color: var(--accent); }\r\n .price-values { display: flex; justify-content: space-between; font-weight: 600; color: var(--dark); margin-top: 8px; }\r\n .filter-category { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: #2b3a2b; }\r\n .filter-category input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--accent); }\r\n .filter-sidebar .btn-filter { background: var(--dark); color: white; width: 100%; padding: 14px; border: none; border-radius: 60px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; margin-top: 10px; }\r\n .filter-sidebar .btn-filter:hover { background: #142e1e; transform: scale(1.02); }\r\n .product-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 25px; }\r\n .card { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); border-radius: 24px; padding: 20px 14px; text-align: center; position: relative; transition: var(--transition); border: 1px solid rgba(255,255,255,0.4); box-shadow: var(--shadow-sm); overflow: hidden; }\r\n .card:hover { transform: translateY(-12px) scale(1.02); box-shadow: var(--shadow-hover); }\r\n .card-badge { position: absolute; top: 16px; right: 16px; background: var(--accent); color: #1f2a1f; font-weight: 800; font-size: 0.9rem; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(6deg); transition: 0.2s; }\r\n .card:hover .card-badge { transform: rotate(0deg) scale(1.05); }\r\n .card-img { width: 100%; height: 160px; background: linear-gradient(145deg, #6F9B7A, var(--green)); border-radius: 20px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; transition: var(--transition); }\r\n .card:hover .card-img { transform: scale(0.98); }\r\n .card h3 { font-size: 1.7rem; font-family: 'Playfair Display', serif; color: var(--dark); }\r\n .card p { color: #5a6b5a; margin: 8px 0; font-size: 0.95rem; }\r\n .card-price { font-size: 1.7rem; font-weight: 700; color: var(--dark); }\r\n .card-price span { font-size: 1rem; color: var(--green); text-decoration: line-through; margin-left: 8px; }\r\n .btn-small { margin-top: 12px; display: inline-block; padding: 8px 20px; border: 1px solid var(--green); border-radius: 40px; text-decoration: none; color: var(--dark); transition: 0.2s; }\r\n .btn-small:hover { background: var(--green); color: white; }\r\n .testimonial { background: var(--dark); color: var(--cream); border-radius: 100px 20px 100px 20px; max-width: 1000px; margin: 100px auto; padding: 60px 40px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }\r\n .testimonial-content { flex: 2; }\r\n .testimonial-content i { font-size: 3rem; color: var(--accent); opacity: 0.5; margin-bottom: 20px; }\r\n .testimonial-content p { font-size: 1.6rem; font-style: italic; line-height: 1.4; }\r\n .testimonial-author { display: block; margin-top: 20px; color: #b9cfb9; font-weight: 500; }\r\n .testimonial-avatar { flex: 1; min-width: 150px; height: 150px; background: var(--green); border-radius: 50% 20% 50% 20%; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--cream); }\r\n .chair-3d-section {\r\n max-width: 1300px;\r\n margin: 80px auto;\r\n padding: 40px 30px;\r\n background: rgba(255,255,255,0.3);\r\n backdrop-filter: blur(8px);\r\n border-radius: 48px;\r\n border: 1px solid rgba(255,255,255,0.4);\r\n box-shadow: var(--shadow-sm);\r\n }\r\n .chair-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 40px;\r\n align-items: center;\r\n }\r\n .viewer-3d {\r\n flex: 1.2;\r\n min-width: 300px;\r\n height: 450px;\r\n background: rgba(0,0,0,0.02);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n cursor: grab;\r\n }\r\n .viewer-3d:active { cursor: grabbing; }\r\n .chair-controls {\r\n flex: 0.8;\r\n min-width: 260px;\r\n background: rgba(255,255,255,0.5);\r\n backdrop-filter: blur(8px);\r\n border-radius: 32px;\r\n padding: 28px 24px;\r\n border: 1px solid rgba(255,255,255,0.6);\r\n }\r\n .chair-controls h3 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 2rem;\r\n color: var(--dark);\r\n margin-bottom: 20px;\r\n }\r\n .option-group {\r\n margin-bottom: 24px;\r\n }\r\n .option-group label {\r\n font-weight: 600;\r\n display: block;\r\n margin-bottom: 8px;\r\n color: var(--dark);\r\n }\r\n .units-selector {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n .unit-btn {\r\n background: var(--cream);\r\n border: 1px solid var(--dark);\r\n padding: 8px 16px;\r\n border-radius: 40px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n font-weight: 600;\r\n }\r\n .unit-btn.active, .unit-btn:hover {\r\n background: var(--accent);\r\n border-color: var(--accent);\r\n color: #1f2a1f;\r\n }\r\n .price-display {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--accent);\r\n margin: 8px 0;\r\n }\r\n select, .color-option {\r\n width: 100%;\r\n padding: 10px 14px;\r\n border-radius: 60px;\r\n border: 1px solid rgba(0,0,0,0.1);\r\n background: white;\r\n font-family: inherit;\r\n font-size: 1rem;\r\n }\r\n .send-request {\r\n background: var(--dark);\r\n color: white;\r\n width: 100%;\r\n padding: 14px;\r\n border: none;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n margin-top: 20px;\r\n }\r\n .send-request:hover {\r\n background: var(--accent);\r\n color: #1f2a1f;\r\n transform: scale(1.02);\r\n }\r\n .newsletter { background: #e6dbc9; border-radius: 80px 20px 80px 20px; max-width: 800px; margin: 80px auto; padding: 60px 40px; text-align: center; }\r\n .newsletter h3 { font-family: 'Playfair Display', serif; font-size: 2.4rem; color: var(--dark); }\r\n .newsletter p { color: #4e624e; margin: 20px 0; }\r\n .form-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 500px; margin: 0 auto; }\r\n .form-group input { flex: 3 1 260px; padding: 16px 24px; border: none; border-radius: 60px; font-size: 1rem; background: white; border: 1px solid #dbd3c0; }\r\n .form-group button { flex: 1 1 auto; padding: 16px 32px; border: none; background: var(--accent); border-radius: 60px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: 0.2s; }\r\n .form-group button:hover { background: #e08b3f; transform: scale(1.02); }\r\n footer { background: rgba(31,61,43,0.9); backdrop-filter: blur(8px); color: var(--cream); padding: 50px 20px 20px; margin-top: 100px; }\r\n .footer-content { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; }\r\n .footer-col h4 { font-size: 1.2rem; margin-bottom: 20px; color: var(--accent); letter-spacing: 1px; }\r\n .footer-col p, .footer-col a { color: #ddd; text-decoration: none; margin: 10px 0; display: block; transition: 0.2s; font-size: 0.95rem; }\r\n .footer-col a:hover { color: var(--accent); transform: translateX(5px); }\r\n .social-icons { display: flex; gap: 18px; font-size: 1.5rem; margin-top: 15px; }\r\n .social-icons i { cursor: pointer; transition: var(--transition); }\r\n .social-icons i:hover { color: var(--accent); transform: translateY(-3px); }\r\n .payment-methods { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }\r\n .payment-methods i { font-size: 2rem; color: #ccc; transition: 0.2s; }\r\n .payment-methods i:hover { color: var(--accent); }\r\n .trust-badge { background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 40px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 5px 0; border: 1px solid rgba(255,255,255,0.1); }\r\n .trust-badge i { color: var(--accent); }\r\n .app-badges { display: flex; gap: 12px; margin-top: 15px; flex-wrap: wrap; }\r\n .app-badge { background: #2f4d3a; padding: 8px 16px; border-radius: 40px; display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: white; transition: 0.2s; }\r\n .app-badge i { font-size: 1.2rem; }\r\n .app-badge:hover { background: var(--accent); color: #1f2a1f; transform: scale(1.05); }\r\n .footer-bottom { text-align: center; padding-top: 40px; font-size: 0.9rem; color: #aaa; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; max-width: 1300px; margin-left: auto; margin-right: auto; }\r\n .footer-bottom-links a { color: #ccc; margin-left: 20px; text-decoration: none; font-size: 0.9rem; }\r\n .footer-bottom-links a:hover { color: var(--accent); }\r\n #backToTop { position: fixed; bottom: 40px; right: 40px; background: var(--accent); color: #1f2a1f; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: var(--transition); opacity: 0; visibility: hidden; z-index: 99; }\r\n #backToTop.show { opacity: 1; visibility: visible; }\r\n #backToTop:hover { transform: translateY(-5px); background: #e08b3f; }\r\n .reveal { opacity: 0; transform: translateY(60px); transition: all 0.8s ease; }\r\n .reveal.active { opacity: 1; transform: translateY(0); }\r\n @media (max-width: 900px) {\r\n .hero { flex-direction: column; text-align: center; }\r\n .hero-content p { margin-left: auto; margin-right: auto; }\r\n .hero-slider { max-width: 100%; }\r\n .nav-links { display: none; }\r\n .menu-toggle { display: block; }\r\n .feature-row { flex-direction: column !important; text-align: center; }\r\n .chair-container { flex-direction: column; }\r\n .viewer-3d { height: 350px; }\r\n }\r\n @media (max-width: 500px) { nav { padding: 12px 20px; } }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"loader\"><div class=\"loader-spinner\"><\/div><div class=\"loader-progress\"><div class=\"loader-bar\"><\/div><\/div><\/div>\r\n<div class=\"cursor\"><\/div>\r\n<nav>\r\n <div class=\"logo\">METRIS<\/div>\r\n <div class=\"nav-links\"><a href=\"#home\" class=\"active\">Home<\/a><a href=\"#featured\">Featured<\/a><a href=\"#products\">Products<\/a><a href=\"#testimonial\">Testimonial<\/a><a href=\"#contact\">Contact<\/a><\/div>\r\n <div class=\"nav-icons\"><i class=\"fas fa-search\"><\/i><i class=\"fas fa-shopping-cart\"><\/i><i class=\"fas fa-user\"><\/i><\/div>\r\n <div class=\"menu-toggle\"><i class=\"fas fa-bars\"><\/i><\/div>\r\n<\/nav>\r\n<section id=\"home\" class=\"hero\">\r\n <div class=\"hero-content reveal\"><span class=\"hero-badge\">30% OFF<\/span><h1>Crafted Luxury <br>For Your Home<\/h1><p>Handmade natural wood furniture that brings warmth and elegance to every space.<\/p><a href=\"#\" class=\"btn\">Explore Collection <i class=\"fas fa-arrow-right\" style=\"margin-left: 8px;\"><\/i><\/a><\/div>\r\n <div class=\"hero-slider reveal\"><div class=\"slider-track\" id=\"sliderTrack\"><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled.png\" alt=\"Furniture 1\"><\/div><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-1.png\" alt=\"Furniture 2\"><\/div><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-2.png\" alt=\"Furniture 3\"><\/div><div class=\"slider-slide\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-3.png\" alt=\"Furniture 4\"><\/div><\/div><div class=\"slider-btn prev\" id=\"prevSlide\"><i class=\"fas fa-chevron-left\"><\/i><\/div><div class=\"slider-btn next\" id=\"nextSlide\"><i class=\"fas fa-chevron-right\"><\/i><\/div><div class=\"slider-dots\" id=\"sliderDots\"><span class=\"dot active\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div><\/div>\r\n<\/section>\r\n<section id=\"featured\" class=\"featured\"><div class=\"section-heading reveal\"><h2>This Week's Featured<\/h2><p>Handpicked just for you<\/p><\/div><div class=\"feature-row reveal\"><div class=\"feature-img-full\"><img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-5.png\" alt=\"Ogilvy Lamp\"><\/div><div class=\"feature-content\"><h3>Ogilvy<\/h3><div class=\"price\">$249<\/div><p>Table Lamp with antique brass finish.<\/p><a href=\"#\" class=\"btn btn-outline\">View Details<\/a><\/div><\/div><div class=\"feature-row reveal\"><div class=\"feature-img\" style=\"background-image: linear-gradient(145deg, #6F9B7A, #2F5D44), url('https:\/\/placehold.co\/600x400\/1F3D2B\/white?text=Arais+Chair'); background-blend-mode: overlay; background-size: cover;\"><\/div><div class=\"feature-content\"><h3>Arais<\/h3><div class=\"price\">$450<\/div><p>Velvet dining chair with black legs.<\/p><a href=\"#\" class=\"btn btn-outline\">View Details<\/a><\/div><\/div><\/section>\r\n<section id=\"products\"><div class=\"section-heading reveal\"><h2>All Products<\/h2><p>refine by price & category<\/p><\/div><div class=\"products-wrapper\"><aside class=\"filter-sidebar reveal\"><h3>Filter<\/h3><div class=\"filter-group\"><label>Max price <span id=\"maxPriceValue\">$1200<\/span><\/label><input type=\"range\" id=\"priceRange\" min=\"0\" max=\"2000\" value=\"1200\" step=\"10\"><div class=\"price-values\"><span>$0<\/span><span>$2000+<\/span><\/div><\/div><div class=\"filter-group\" id=\"categoryGroup\"><label>Categories<\/label><div class=\"filter-category\"><input type=\"checkbox\" value=\"bed\"> Beds<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"sofa\"> Seating<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"table\"> Tables<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"storage\"> Storage<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"lighting\"> Lighting<\/div><\/div><div class=\"filter-group\" id=\"materialGroup\"><label>Material<\/label><div class=\"filter-category\"><input type=\"checkbox\" value=\"wood\"> Wood<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"metal\"> Metal<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"velvet\"> Velvet<\/div><div class=\"filter-category\"><input type=\"checkbox\" value=\"glass\"> Glass<\/div><\/div><div style=\"display: flex; gap: 10px; margin-top: 10px;\"><button class=\"btn-filter\" id=\"applyFilterBtn\" style=\"flex:2\">APPLY<\/button><button class=\"btn-filter\" id=\"resetFilterBtn\" style=\"flex:1; background: var(--accent); color: #1f2a1f;\">RESET<\/button><\/div><p id=\"filterStatus\" style=\"margin-top: 15px; font-size: 0.9rem;\"><\/p><\/aside><div class=\"product-grid\" id=\"productGrid\"><div class=\"card reveal\" data-price=\"1290\" data-category=\"bed\" data-material=\"wood\"><div class=\"card-badge\">-15%<\/div><div class=\"card-img\"><i class=\"fas fa-bed\"><\/i><\/div><h3>Haru<\/h3><p>Single sable bed<\/p><div class=\"card-price\">$1,290 <span>$1,499<\/span><\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"850\" data-category=\"sofa\" data-material=\"velvet\"><div class=\"card-badge\">new<\/div><div class=\"card-img\"><i class=\"fas fa-couch\"><\/i><\/div><h3>Hettie<\/h3><p>Sofa bed, moss green<\/p><div class=\"card-price\">$850<\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"420\" data-category=\"table\" data-material=\"metal\"><div class=\"card-badge\">$32<\/div><div class=\"card-img\"><i class=\"fas fa-table\"><\/i><\/div><h3>Ebro<\/h3><p>Bedside table, gold<\/p><div class=\"card-price\">$420<\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"890\" data-category=\"table\" data-material=\"wood\"><div class=\"card-badge\">-10%<\/div><div class=\"card-img\"><i class=\"fas fa-utensils\"><\/i><\/div><h3>Dione<\/h3><p>Dining table, oak<\/p><div class=\"card-price\">$890 <span>$990<\/span><\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"650\" data-category=\"table\" data-material=\"wood\"><div class=\"card-badge\">-20%<\/div><div class=\"card-img\"><i class=\"fas fa-chess-board\"><\/i><\/div><h3>Kumo<\/h3><p>Minimalist desk, walnut<\/p><div class=\"card-price\">$650 <span>$810<\/span><\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><div class=\"card reveal\" data-price=\"1150\" data-category=\"storage\" data-material=\"wood\"><div class=\"card-badge\">new<\/div><div class=\"card-img\"><i class=\"fas fa-archive\"><\/i><\/div><h3>Nimbus<\/h3><p>Storage cabinet, 2 doors<\/p><div class=\"card-price\">$1,150<\/div><a href=\"#\" class=\"btn-small\">Add to cart<\/a><\/div><\/div><\/div><\/section>\r\n<section id=\"testimonial\" class=\"testimonial reveal\"><div class=\"testimonial-content\"><i class=\"fas fa-quote-left\"><\/i><p>Excellent product, delivered sooner than said. Ilaria lamp looks beautiful.<\/p><span class=\"testimonial-author\">\u2014 M. Chen, verified buyer<\/span><\/div><div class=\"testimonial-avatar\"><i class=\"fas fa-user-circle\"><\/i><\/div><\/section>\r\n\r\n\r\n<div class=\"chair-3d-section reveal\">\r\n <div class=\"chair-container\">\r\n <div class=\"viewer-3d\" id=\"chairViewer\"><\/div>\r\n <div class=\"chair-controls\">\r\n <h3>Eero Armchair<\/h3>\r\n <div class=\"option-group\"><label>Units<\/label><div class=\"units-selector\" id=\"unitSelector\"><span class=\"unit-btn\" data-units=\"5\">5<\/span><span class=\"unit-btn\" data-units=\"6\">6<\/span><span class=\"unit-btn active\" data-units=\"7\">7<\/span><span class=\"unit-btn\" data-units=\"8\">8<\/span><span class=\"unit-btn\" data-units=\"9\">9<\/span><\/div><\/div>\r\n <div class=\"option-group\"><label>Price<\/label><div class=\"price-display\" id=\"priceDisplay\">$340<\/div><\/div>\r\n <div class=\"option-group\"><label>Colour (tint)<\/label><select id=\"colourSelect\"><option value=\"#2F5D44\">Forest Green<\/option><option value=\"#F4A259\">Terracotta<\/option><option value=\"#1F3D2B\">Dark Oak<\/option><option value=\"#D9C5A7\">Sand Beige<\/option><\/select><\/div>\r\n <div class=\"option-group\"><label>Material finish<\/label><select id=\"materialSelect\"><option value=\"velvet\">Velvet (soft)<\/option><option value=\"linen\">Linen (textured)<\/option><option value=\"leather\">Leather (smooth)<\/option><option value=\"wool\">Wool (matte)<\/option><\/select><\/div>\r\n <div class=\"option-group\"><label>Base<\/label><select id=\"baseSelect\"><option value=\"black\">Black Steel<\/option><option value=\"brass\">Brass<\/option><option value=\"chrome\">Chrome<\/option><option value=\"wood\">Walnut Wood<\/option><\/select><\/div>\r\n <div class=\"option-group\"><label>Style<\/label><select id=\"styleSelect\"><option value=\"modern\">Modern<\/option><option value=\"scandinavian\">Scandinavian<\/option><option value=\"industrial\">Industrial<\/option><option value=\"midcentury\">Mid\u2011Century<\/option><\/select><\/div>\r\n <button class=\"send-request\" id=\"sendRequestBtn\">SEND REQUEST<\/button>\r\n <p style=\"font-size:0.75rem; margin-top:12px; color:#4f6b4f;\"><i class=\"fas fa-palette\"><\/i> Premium fabric texture applied<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"newsletter reveal\"><h3>Subscribe to Our Newsletter<\/h3><p>Get exclusive offers and early access to new collections.<\/p><div class=\"form-group\"><input type=\"email\" placeholder=\"Your email address\"><button>Subscribe Now<\/button><\/div><\/div>\r\n<footer id=\"contact\"><div class=\"footer-content\"><div class=\"footer-col\"><h4>METRIS<\/h4><p>Smart furniture for modern living. Est. 2025<\/p><div class=\"social-icons\"><i class=\"fab fa-instagram\"><\/i><i class=\"fab fa-facebook-f\"><\/i><i class=\"fab fa-pinterest\"><\/i><i class=\"fab fa-x-twitter\"><\/i><\/div><div class=\"trust-badge\"><i class=\"fas fa-shield-alt\"><\/i> 100% secure checkout<\/div><div class=\"trust-badge\"><i class=\"fas fa-tree\"><\/i> Eco-friendly materials<\/div><\/div><div class=\"footer-col\"><h4>Shop<\/h4><a href=\"#\">Living room<\/a><a href=\"#\">Bedroom<\/a><a href=\"#\">Dining<\/a><a href=\"#\">Lighting<\/a><a href=\"#\">Accessories<\/a><\/div><div class=\"footer-col\"><h4>Company<\/h4><a href=\"#\">About Us<\/a><a href=\"#\">Sustainability<\/a><a href=\"#\">Showroom<\/a><a href=\"#\">Careers<\/a><a href=\"#\">Contact<\/a><\/div><div class=\"footer-col\"><h4>Support<\/h4><a href=\"#\">FAQ<\/a><a href=\"#\">Shipping & returns<\/a><a href=\"#\">Warranty<\/a><a href=\"#\">Assembly guides<\/a><a href=\"#\">Privacy policy<\/a><\/div><div class=\"footer-col\"><h4>Download app<\/h4><div class=\"app-badges\"><span class=\"app-badge\"><i class=\"fab fa-apple\"><\/i> App Store<\/span><span class=\"app-badge\"><i class=\"fab fa-google-play\"><\/i> Google Play<\/span><\/div><h4 style=\"margin-top: 25px;\">We accept<\/h4><div class=\"payment-methods\"><i class=\"fab fa-cc-visa\"><\/i><i class=\"fab fa-cc-mastercard\"><\/i><i class=\"fab fa-cc-amex\"><\/i><i class=\"fab fa-cc-paypal\"><\/i><i class=\"fab fa-cc-apple-pay\"><\/i><\/div><\/div><\/div><div class=\"footer-bottom\"><span>\u00a9 2025 METRIS \u2014 naturally inspired living<\/span><div class=\"footer-bottom-links\"><a href=\"#\">Sitemap<\/a><a href=\"#\">Terms<\/a><a href=\"#\">Privacy<\/a><a href=\"#\">Cookies<\/a><\/div><\/div><\/footer>\r\n<div id=\"backToTop\" title=\"Back to top\"><i class=\"fas fa-chevron-up\"><\/i><\/div>\r\n\r\n<script type=\"module\">\r\n import * as THREE from 'three';\r\n import { OrbitControls } from 'three\/addons\/controls\/OrbitControls.js';\r\n\r\n const container = document.getElementById('chairViewer');\r\n const scene = new THREE.Scene();\r\n scene.background = new THREE.Color(0xf0e8d8);\r\n const camera = new THREE.PerspectiveCamera(45, container.clientWidth \/ container.clientHeight, 0.1, 1000);\r\n camera.position.set(3, 2, 4);\r\n camera.lookAt(0, 0.8, 0);\r\n const renderer = new THREE.WebGLRenderer({ antialias: true });\r\n renderer.setSize(container.clientWidth, container.clientHeight);\r\n renderer.shadowMap.enabled = true;\r\n container.appendChild(renderer.domElement);\r\n const controls = new OrbitControls(camera, renderer.domElement);\r\n controls.enableDamping = true; controls.dampingFactor = 0.05; controls.autoRotate = false; controls.enableZoom = true; controls.target.set(0, 0.8, 0);\r\n\r\n \/\/ lighting\r\n const ambientLight = new THREE.AmbientLight(0x404060); scene.add(ambientLight);\r\n const dirLight = new THREE.DirectionalLight(0xffffff, 1); dirLight.position.set(2, 3, 2); dirLight.castShadow = true; scene.add(dirLight);\r\n const fillLight = new THREE.PointLight(0xc0a080, 0.4); fillLight.position.set(0, -1, 0); scene.add(fillLight);\r\n const rimLight = new THREE.PointLight(0xffaa66, 0.6); rimLight.position.set(-1, 1.5, -1.5); scene.add(rimLight);\r\n\r\n const chairGroup = new THREE.Group();\r\n \/\/ geometries\r\n const seatGeo = new THREE.BoxGeometry(0.9, 0.12, 0.85);\r\n const backGeo = new THREE.BoxGeometry(0.9, 0.65, 0.08);\r\n const armGeo = new THREE.BoxGeometry(0.12, 0.1, 0.7);\r\n const cushionGeo = new THREE.BoxGeometry(0.75, 0.45, 0.05);\r\n const legMatDefault = new THREE.MeshStandardMaterial({ color: 0x333333, metalness: 0.7, roughness: 0.3 });\r\n \r\n const seat = new THREE.Mesh(seatGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n seat.position.set(0, 0.4, 0); seat.castShadow = true;\r\n const back = new THREE.Mesh(backGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n back.position.set(0, 0.8, -0.42); back.castShadow = true;\r\n const leftArm = new THREE.Mesh(armGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n leftArm.position.set(-0.55, 0.65, 0); leftArm.castShadow = true;\r\n const rightArm = new THREE.Mesh(armGeo, new THREE.MeshStandardMaterial({ color: 0x2F5D44 }));\r\n rightArm.position.set(0.55, 0.65, 0); rightArm.castShadow = true;\r\n const cushionDeco = new THREE.Mesh(cushionGeo, new THREE.MeshStandardMaterial({ color: 0xF4A259, roughness: 0.5 }));\r\n cushionDeco.position.set(0, 0.75, -0.38); cushionDeco.castShadow = true;\r\n \r\n chairGroup.add(seat, back, leftArm, rightArm, cushionDeco);\r\n const legPositions = [[-0.4, 0.1, -0.4], [0.4, 0.1, -0.4], [-0.4, 0.1, 0.4], [0.4, 0.1, 0.4]];\r\n legPositions.forEach(pos => { const leg = new THREE.Mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.35, 8), legMatDefault); leg.position.set(pos[0], pos[1], pos[2]); leg.castShadow = true; chairGroup.add(leg); });\r\n scene.add(chairGroup);\r\n const planeHelper = new THREE.Mesh(new THREE.PlaneGeometry(3, 3), new THREE.ShadowMaterial({ opacity: 0.3, color: 0x000000, transparent: true, side: THREE.DoubleSide }));\r\n planeHelper.rotation.x = -Math.PI \/ 2; planeHelper.position.y = -0.05; planeHelper.receiveShadow = true; scene.add(planeHelper);\r\n\r\n \/\/ fabric parts array\r\n const fabricParts = [seat, back, leftArm, rightArm, cushionDeco];\r\n let fabricTexture = null;\r\n const textureLoader = new THREE.TextureLoader();\r\n \/\/ Load the specific image for the chair (360\u00b0 interactive texture)\r\n textureLoader.load('https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/03\/Untitled-1.png', \r\n (tex) => {\r\n fabricTexture = tex;\r\n fabricTexture.wrapS = THREE.RepeatWrapping;\r\n fabricTexture.wrapT = THREE.RepeatWrapping;\r\n fabricTexture.repeat.set(1.2, 1.2);\r\n \/\/ apply texture to all fabric parts\r\n fabricParts.forEach(part => {\r\n if (part.material) {\r\n const newMat = new THREE.MeshStandardMaterial({ map: fabricTexture, color: document.getElementById('colourSelect').value, roughness: 0.4, metalness: 0.05 });\r\n part.material.dispose();\r\n part.material = newMat;\r\n }\r\n });\r\n \/\/ re-sync material properties based on current selections\r\n updateMaterialFinish(document.getElementById('materialSelect').value);\r\n updateBaseColor(document.getElementById('baseSelect').value);\r\n },\r\n undefined,\r\n (err) => console.warn(\"texture loading fallback, using color only\", err)\r\n );\r\n\r\n function updateChairTint(colorHex) {\r\n if (!fabricTexture) return;\r\n fabricParts.forEach(part => { if (part.material) part.material.color.set(colorHex); });\r\n }\r\n function updateMaterialFinish(materialType) {\r\n if (!fabricTexture) return;\r\n let roughnessVal = 0.4, metalnessVal = 0.05;\r\n if (materialType === 'velvet') { roughnessVal = 0.28; metalnessVal = 0.02; }\r\n else if (materialType === 'linen') { roughnessVal = 0.72; metalnessVal = 0.0; }\r\n else if (materialType === 'leather') { roughnessVal = 0.25; metalnessVal = 0.12; }\r\n else if (materialType === 'wool') { roughnessVal = 0.68; metalnessVal = 0.0; }\r\n fabricParts.forEach(part => { if (part.material) { part.material.roughness = roughnessVal; part.material.metalness = metalnessVal; } });\r\n }\r\n function updateBaseColor(baseType) {\r\n let legColor = 0x333333;\r\n if (baseType === 'brass') legColor = 0xcc8844;\r\n else if (baseType === 'chrome') legColor = 0xccccdd;\r\n else if (baseType === 'wood') legColor = 0x8b5a2b;\r\n chairGroup.children.forEach(child => { if (child.geometry && child.geometry.type === 'CylinderGeometry' && child.material) child.material.color.setHex(legColor); });\r\n }\r\n document.getElementById('colourSelect').addEventListener('change', (e) => updateChairTint(e.target.value));\r\n document.getElementById('materialSelect').addEventListener('change', (e) => updateMaterialFinish(e.target.value));\r\n document.getElementById('baseSelect').addEventListener('change', (e) => updateBaseColor(e.target.value));\r\n \r\n \/\/ price & units logic\r\n const basePrice = 340;\r\n const priceDisplay = document.getElementById('priceDisplay');\r\n function updatePrice(units) { priceDisplay.textContent = `$${basePrice * units}`; }\r\n document.querySelectorAll('.unit-btn').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n document.querySelectorAll('.unit-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n updatePrice(parseInt(btn.dataset.units, 10));\r\n });\r\n });\r\n updatePrice(7);\r\n document.getElementById('sendRequestBtn').addEventListener('click', () => alert('\u2713 Request sent! Our design team will reach out within 24h.'));\r\n \r\n function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); }\r\n animate();\r\n window.addEventListener('resize', () => { const w = container.clientWidth, h = container.clientHeight; camera.aspect = w \/ h; camera.updateProjectionMatrix(); renderer.setSize(w, h); });\r\n<\/script>\r\n\r\n<script>\r\n (function() {\r\n window.addEventListener('load', () => { setTimeout(() => { const l=document.getElementById('loader'); l.style.opacity='0'; setTimeout(()=>l.style.display='none',500); }, 1800); });\r\n const cursor = document.querySelector('.cursor');\r\n document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; });\r\n const hoverItems = document.querySelectorAll('a, button, .btn, .card, .nav-icons i, .social-icons i, .unit-btn, .send-request');\r\n hoverItems.forEach(el => { el.addEventListener('mouseenter', () => cursor.classList.add('hover')); el.addEventListener('mouseleave', () => cursor.classList.remove('hover')); });\r\n const reveals = document.querySelectorAll('.reveal');\r\n new IntersectionObserver((entries) => { entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('active'); }); }, { threshold: 0.1 }).observe(document.querySelector('.reveal'));\r\n reveals.forEach(r => new IntersectionObserver(([entry]) => { if(entry.isIntersecting) entry.target.classList.add('active'); }, { threshold: 0.1 }).observe(r));\r\n const backBtn = document.getElementById('backToTop');\r\n window.addEventListener('scroll', () => { window.scrollY > 600 ? backBtn.classList.add('show') : backBtn.classList.remove('show'); });\r\n backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\r\n document.querySelector('.menu-toggle').addEventListener('click', () => alert('Mobile navigation \u2014 full menu would expand here.'));\r\n \/\/ slider\r\n const track = document.getElementById('sliderTrack'), slides = document.querySelectorAll('.slider-slide'), dots = document.querySelectorAll('.dot'), prev = document.getElementById('prevSlide'), next = document.getElementById('nextSlide');\r\n let idx = 0, total = slides.length;\r\n function updateSlider(i) { i = (i + total) % total; track.style.transform = `translateX(-${i * 100}%)`; dots.forEach((d, n) => d.classList.toggle('active', n === i)); idx = i; }\r\n prev.addEventListener('click', () => updateSlider(idx - 1)); next.addEventListener('click', () => updateSlider(idx + 1)); dots.forEach((d, i) => d.addEventListener('click', () => updateSlider(i)));\r\n setInterval(() => updateSlider(idx + 1), 5000);\r\n \/\/ product filter\r\n const priceRange = document.getElementById('priceRange'), maxSpan = document.getElementById('maxPriceValue'), applyBtn = document.getElementById('applyFilterBtn'), resetBtn = document.getElementById('resetFilterBtn'), statusSpan = document.getElementById('filterStatus');\r\n const catBoxes = document.querySelectorAll('#categoryGroup input'), matBoxes = document.querySelectorAll('#materialGroup input'), cards = document.querySelectorAll('.card');\r\n function updateLabel() { maxSpan.textContent = '$' + priceRange.value; }\r\n priceRange.addEventListener('input', updateLabel); updateLabel();\r\n function getSelected(arr) { return Array.from(arr).filter(cb => cb.checked).map(cb => cb.value); }\r\n function apply() { const max = parseInt(priceRange.value), cats = getSelected(catBoxes), mats = getSelected(matBoxes); let visible = 0; cards.forEach(c => { const price = parseInt(c.dataset.price), category = c.dataset.category, material = c.dataset.material; const ok = price <= max && (cats.length===0||cats.includes(category)) && (mats.length===0||mats.includes(material)); c.style.display = ok ? '' : 'none'; if(ok) visible++; }); statusSpan.textContent = `${visible} product(s) visible`; }\r\n function reset() { priceRange.value = 1200; updateLabel(); catBoxes.forEach(cb=>cb.checked=false); matBoxes.forEach(cb=>cb.checked=false); apply(); }\r\n applyBtn.addEventListener('click', apply); resetBtn.addEventListener('click', reset); apply();\r\n })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>METRIS \u00b7 360\u00b0 chair \u00b7 premium texture 3D configurator METRIS HomeFeaturedProductsTestimonialContact 30% OFF Crafted Luxury For Your Home Handmade natural […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1084","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/1084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/comments?post=1084"}],"version-history":[{"count":127,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/1084\/revisions"}],"predecessor-version":[{"id":1233,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/1084\/revisions\/1233"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=1084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}