{"id":677,"date":"2026-02-28T04:50:31","date_gmt":"2026-02-28T04:50:31","guid":{"rendered":"https:\/\/hithotprodcut.com\/?page_id=677"},"modified":"2026-03-02T05:51:43","modified_gmt":"2026-03-02T05:51:43","slug":"banner","status":"publish","type":"page","link":"https:\/\/hithotprodcut.com\/index.php\/banner\/","title":{"rendered":"banner"},"content":{"rendered":"\t\t
\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 sonicsphere \u00b7 advanced search + correct order<\/title>\r\n <!-- Google Fonts & Font Awesome 6 -->\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;800;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 <style>\r\n \/* ===== base & existing styles (unchanged) ===== *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n body {\r\n background: linear-gradient(145deg, #ff7a00, #ff9d2f);\r\n overflow-x: hidden;\r\n transition: background 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n min-height: 100vh;\r\n }\r\n\r\n \/* liquid background (unchanged) *\/\r\n .liquid {\r\n position: fixed;\r\n width: 100%;\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n .blob {\r\n position: absolute;\r\n background: radial-gradient(circle at 30% 30%, rgba(255, 180, 70, 0.7), rgba(255, 100, 0, 0.5));\r\n border-radius: 60% 40% 50% 50%;\r\n filter: blur(70px);\r\n animation: morphBlob 16s infinite alternate ease-in-out;\r\n }\r\n .blob1 { width: 700px; height: 700px; top: -200px; right: -150px; background: radial-gradient(circle, #ffb347, #ff5500); animation-duration: 18s; }\r\n .blob2 { width: 500px; height: 500px; bottom: -150px; left: -100px; background: radial-gradient(circle, #ffaa33, #ff7700); filter: blur(90px); animation: morphBlob 20s reverse infinite; }\r\n .blob3 { width: 400px; height: 400px; top: 30%; left: 20%; background: radial-gradient(circle, #ffaa00, #ff8800); filter: blur(80px); animation: morphBlob 14s infinite alternate; }\r\n @keyframes morphBlob {\r\n 0% { border-radius: 60% 40% 50% 50%; transform: translate(0, 0) scale(1); }\r\n 25% { border-radius: 40% 60% 40% 60%; transform: translate(30px, -20px) scale(1.1); }\r\n 50% { border-radius: 50% 50% 60% 40%; transform: translate(-20px, 30px) scale(1.2); }\r\n 75% { border-radius: 60% 40% 50% 50%; transform: translate(20px, -30px) scale(1.05); }\r\n 100% { border-radius: 40% 60% 50% 50%; transform: translate(-30px, 20px) scale(1); }\r\n }\r\n\r\n \/* header with advanced search *\/\r\n header {\r\n position: absolute;\r\n width: 100%;\r\n padding: 18px 8%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(255, 255, 255, 0.08);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(255,255,255,0.2);\r\n z-index: 100;\r\n gap: 20px;\r\n }\r\n\r\n .logo {\r\n color: #fff;\r\n font-weight: 900;\r\n font-size: 26px;\r\n letter-spacing: 2px;\r\n text-shadow: 0 5px 20px rgba(0,0,0,0.2);\r\n white-space: nowrap;\r\n }\r\n .logo i {\r\n margin-right: 6px;\r\n font-size: 28px;\r\n }\r\n\r\n \/* advanced search wrapper *\/\r\n .search-wrapper {\r\n flex: 1;\r\n max-width: 500px; \/* wider to accommodate dropdown *\/\r\n margin: 0 10px;\r\n position: relative;\r\n }\r\n .search-form {\r\n display: flex;\r\n align-items: center;\r\n background: rgba(255,255,255,0.15);\r\n border-radius: 50px;\r\n padding: 4px 4px 4px 12px;\r\n backdrop-filter: blur(5px);\r\n border: 1px solid rgba(255,255,255,0.25);\r\n transition: 0.2s;\r\n gap: 4px;\r\n }\r\n .search-form:hover, .search-form:focus-within {\r\n background: rgba(255,255,255,0.25);\r\n border-color: rgba(255,255,255,0.5);\r\n }\r\n .search-form i {\r\n color: rgba(255,255,255,0.8);\r\n font-size: 16px;\r\n margin-right: 4px;\r\n }\r\n \/* category dropdown *\/\r\n .search-form select {\r\n background: rgba(255,255,255,0.2);\r\n border: none;\r\n border-radius: 30px;\r\n padding: 8px 12px;\r\n color: white;\r\n font-size: 14px;\r\n outline: none;\r\n cursor: pointer;\r\n font-weight: 500;\r\n option {\r\n background: #333;\r\n color: white;\r\n }\r\n }\r\n .search-form select option {\r\n background: #2a2a2a;\r\n color: white;\r\n }\r\n .search-form input[type=\"search\"] {\r\n background: transparent;\r\n border: none;\r\n padding: 8px 8px;\r\n width: 100%;\r\n color: white;\r\n font-size: 15px;\r\n outline: none;\r\n min-width: 120px;\r\n }\r\n .search-form input[type=\"search\"]::placeholder {\r\n color: rgba(255,255,255,0.7);\r\n font-weight: 300;\r\n }\r\n .search-form button {\r\n background: white;\r\n border: none;\r\n border-radius: 50px;\r\n padding: 8px 18px;\r\n font-weight: 600;\r\n color: #ff7a00;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n white-space: nowrap;\r\n font-size: 14px;\r\n }\r\n .search-form button:hover {\r\n background: #ffeedd;\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* autocomplete suggestions *\/\r\n .suggestions-box {\r\n position: absolute;\r\n top: calc(100% + 8px);\r\n left: 0;\r\n right: 0;\r\n background: rgba(30, 30, 30, 0.95);\r\n backdrop-filter: blur(12px);\r\n border-radius: 20px;\r\n border: 1px solid rgba(255,255,255,0.2);\r\n max-height: 250px;\r\n overflow-y: auto;\r\n z-index: 1000;\r\n display: none;\r\n box-shadow: 0 15px 30px rgba(0,0,0,0.5);\r\n }\r\n .suggestions-box.active {\r\n display: block;\r\n }\r\n .suggestion-item {\r\n padding: 12px 18px;\r\n color: white;\r\n cursor: pointer;\r\n transition: background 0.2s;\r\n border-bottom: 1px solid rgba(255,255,255,0.1);\r\n }\r\n .suggestion-item:last-child {\r\n border-bottom: none;\r\n }\r\n .suggestion-item:hover {\r\n background: rgba(255,255,255,0.2);\r\n }\r\n .suggestion-item .product-cat {\r\n font-size: 0.75rem;\r\n color: #ffaa66;\r\n margin-left: 10px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .header-actions {\r\n display: flex;\r\n align-items: center;\r\n gap: 30px;\r\n }\r\n .cart-link {\r\n color: white;\r\n font-size: 24px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n .cart-link:hover {\r\n transform: scale(1.1);\r\n color: #fff6e5;\r\n }\r\n .cart-link span {\r\n position: absolute;\r\n top: -8px;\r\n right: -10px;\r\n background: #ff5500;\r\n color: white;\r\n font-size: 11px;\r\n font-weight: 700;\r\n padding: 3px 6px;\r\n border-radius: 20px;\r\n border: 2px solid rgba(255,255,255,0.5);\r\n }\r\n\r\n nav ul {\r\n display: flex;\r\n gap: 32px;\r\n list-style: none;\r\n }\r\n nav a {\r\n color: #fff;\r\n text-decoration: none;\r\n font-weight: 500;\r\n font-size: 15px;\r\n transition: 0.25s;\r\n position: relative;\r\n letter-spacing: 0.5px;\r\n white-space: nowrap;\r\n }\r\n nav a::after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 2px;\r\n bottom: -6px;\r\n left: 0;\r\n background: #fff;\r\n transition: 0.3s;\r\n }\r\n nav a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* hero section (unchanged) *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 0 8%;\r\n position: relative;\r\n z-index: 10;\r\n gap: 40px;\r\n }\r\n\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(18px);\r\n -webkit-backdrop-filter: blur(18px);\r\n border-radius: 40px;\r\n padding: 50px 45px;\r\n color: #fff;\r\n max-width: 540px;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n box-shadow: 0 30px 50px rgba(0,0,0,0.2), inset 0 1px 3px rgba(255,255,255,0.5);\r\n animation: slideUp 1s ease-out;\r\n }\r\n @keyframes slideUp {\r\n 0% { opacity: 0; transform: translateY(60px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n .glass-card h1 { font-size: 64px; font-weight: 900; line-height: 1.0; margin-bottom: 10px; text-transform: uppercase; letter-spacing: -1px; text-shadow: 0 4px 20px rgba(0,0,0,0.2); }\r\n .badge { display: inline-block; background: rgba(255,255,255,0.25); backdrop-filter: blur(5px); padding: 6px 18px; border-radius: 40px; font-size: 14px; font-weight: 500; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.3); }\r\n .desc { font-size: 16px; margin: 20px 0 15px; opacity: 0.9; line-height: 1.6; max-width: 400px; }\r\n .specs { display: flex; gap: 25px; margin: 25px 0; }\r\n .spec-item { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.15); padding: 5px 16px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.2); font-weight: 500; font-size: 15px; }\r\n .price-row { display: flex; align-items: center; gap: 30px; margin: 30px 0 20px; }\r\n .price { font-size: 42px; font-weight: 800; letter-spacing: -1px; }\r\n .price small { font-size: 16px; font-weight: 400; opacity: 0.7; }\r\n .color-picker { margin: 25px 0; }\r\n .color-label { font-size: 14px; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; margin-bottom: 8px; }\r\n .color-dots { display: flex; gap: 18px; }\r\n .color-dot { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid rgba(255,255,255,0.6); transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }\r\n .color-dot:hover { transform: scale(1.3) rotate(8deg); border-color: white; box-shadow: 0 0 25px currentColor; }\r\n .color-dot.orange { background: #ff7a00; }\r\n .color-dot.blue { background: #1e6df2; }\r\n .color-dot.black { background: #222; }\r\n .color-dot.yellow { background: #ffd966; }\r\n .btn-wrapper { position: relative; display: inline-block; }\r\n .btn { padding: 16px 52px; border: none; border-radius: 60px; background: #fff; color: #1e1e1e; font-weight: 700; font-size: 18px; cursor: pointer; transition: all 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; z-index: 1; }\r\n .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 115, 0, 0.3); transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; z-index: -1; }\r\n .btn:hover::before { width: 300px; height: 300px; }\r\n .btn:hover { transform: scale(1.06) translateY(-3px); color: #ff5500; box-shadow: 0 22px 45px rgba(0,0,0,0.35); }\r\n .btn i { font-size: 22px; transition: 0.3s; }\r\n .btn:hover i { transform: translateX(6px); }\r\n\r\n \/* right slider (unchanged) *\/\r\n .product-area {\r\n position: relative;\r\n width: 500px;\r\n height: 500px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n perspective: 1500px;\r\n }\r\n .sound-ring {\r\n position: absolute;\r\n width: 360px;\r\n height: 360px;\r\n border-radius: 50%;\r\n border: 2px solid rgba(255,255,255,0.25);\r\n animation: soundPulse 3s infinite ease-out;\r\n box-shadow: 0 0 40px rgba(255,140,0,0.4);\r\n }\r\n .sound-ring2 {\r\n width: 440px;\r\n height: 440px;\r\n border: 2px dashed rgba(255,255,255,0.2);\r\n animation: soundPulse 4s infinite reverse;\r\n }\r\n @keyframes soundPulse {\r\n 0% { transform: scale(0.9); opacity: 0.8; }\r\n 100% { transform: scale(1.5); opacity: 0; }\r\n }\r\n .pedestal-glow {\r\n position: absolute;\r\n bottom: 60px;\r\n width: 380px;\r\n height: 50px;\r\n background: radial-gradient(circle, rgba(255,200,100,0.8), transparent);\r\n border-radius: 50%;\r\n filter: blur(28px);\r\n }\r\n .slider-container {\r\n position: relative;\r\n width: 340px;\r\n height: 340px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.1s ease-out;\r\n transform-style: preserve-3d;\r\n z-index: 20;\r\n }\r\n .slider-wrapper {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.5s ease, visibility 0.5s;\r\n }\r\n .slide.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n .slide img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n filter: drop-shadow(0 30px 30px rgba(0,0,0,0.5));\r\n transition: filter 0.3s;\r\n }\r\n .slider-btn {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.25);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255,255,255,0.4);\r\n color: white;\r\n font-size: 22px;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.2s;\r\n z-index: 30;\r\n }\r\n .slider-btn:hover {\r\n background: rgba(255,255,255,0.5);\r\n transform: translateY(-50%) scale(1.1);\r\n }\r\n .slider-btn.prev { left: -20px; }\r\n .slider-btn.next { right: -20px; }\r\n .slider-dots {\r\n position: absolute;\r\n bottom: -35px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 14px;\r\n z-index: 30;\r\n }\r\n .dot {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.4);\r\n border: 1px solid rgba(255,255,255,0.6);\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .dot.active {\r\n background: white;\r\n transform: scale(1.4);\r\n box-shadow: 0 0 15px white;\r\n }\r\n .rating-float {\r\n position: absolute;\r\n top: 90px;\r\n right: 20px;\r\n background: rgba(255,255,255,0.2);\r\n backdrop-filter: blur(12px);\r\n padding: 10px 20px;\r\n border-radius: 60px;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n color: white;\r\n font-weight: 600;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n z-index: 20;\r\n }\r\n .rating-float i {\r\n color: gold;\r\n animation: starTwinkle 1.8s infinite alternate;\r\n }\r\n @keyframes starTwinkle {\r\n 0% { opacity: 1; text-shadow: 0 0 5px gold; }\r\n 100% { opacity: 0.8; text-shadow: 0 0 15px orange; }\r\n }\r\n\r\n \/* ===== BANNER 1: featured picks (4 products) ===== *\/\r\n .banner-featured {\r\n position: relative;\r\n z-index: 20;\r\n padding: 2rem 8% 2rem;\r\n background: transparent;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n .banner-featured h2 {\r\n color: white;\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 1.5rem;\r\n text-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n .banner-featured h2 i {\r\n background: rgba(255,255,255,0.2);\r\n padding: 12px;\r\n border-radius: 50%;\r\n font-size: 1.8rem;\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .card-grid-featured {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n .card-featured {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 1.2rem 1rem 1.2rem 1rem;\r\n border-radius: 2rem 2rem 1.5rem 1.5rem;\r\n background: rgba(255,255,255,0.1);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255,255,255,0.25);\r\n transition: transform 0.3s ease, box-shadow 0.3s;\r\n box-shadow: 0 15px 30px -12px rgba(0,0,0,0.3);\r\n overflow: hidden;\r\n }\r\n\r\n .card-featured::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 6px;\r\n background: var(--accent-color);\r\n z-index: 2;\r\n }\r\n\r\n .card-featured:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 25px 40px -15px black;\r\n background: rgba(255,255,255,0.2);\r\n }\r\n\r\n .featured-price {\r\n align-self: flex-end;\r\n font-size: 2.4rem;\r\n font-weight: 800;\r\n color: white;\r\n text-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n background: rgba(0,0,0,0.2);\r\n backdrop-filter: blur(4px);\r\n padding: 0.1rem 1rem 0.1rem 1.2rem;\r\n border-radius: 40px 0 0 40px;\r\n border-left: 4px solid var(--accent-color);\r\n margin-bottom: 0.5rem;\r\n line-height: 1.2;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .card-featured:hover .featured-price {\r\n transform: scale(1.02) translateX(-3px);\r\n }\r\n\r\n .featured-image {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 150px;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n }\r\n\r\n .featured-image::before {\r\n content: '';\r\n position: absolute;\r\n width: 130px;\r\n height: 130px;\r\n border-radius: 50%;\r\n background: rgba(255,255,255,0.2);\r\n filter: blur(8px);\r\n z-index: 1;\r\n }\r\n\r\n .featured-image img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n position: relative;\r\n z-index: 2;\r\n filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3));\r\n transition: transform 0.3s;\r\n }\r\n\r\n .card-featured:hover .featured-image img {\r\n transform: scale(1.08) rotate(-2deg);\r\n }\r\n\r\n .featured-label {\r\n text-align: left;\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .featured-category {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n letter-spacing: 0.15em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.7);\r\n margin-bottom: 0.1rem;\r\n }\r\n\r\n .featured-title {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n line-height: 1.1;\r\n color: white;\r\n text-transform: uppercase;\r\n }\r\n\r\n .shop-now {\r\n margin-top: 0.2rem;\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n .shop-link {\r\n background: rgba(255,255,255,0.25);\r\n backdrop-filter: blur(10px);\r\n padding: 0.6rem 1.6rem;\r\n border-radius: 40px;\r\n color: white;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n text-decoration: none;\r\n letter-spacing: 1px;\r\n border: 1px solid rgba(255,255,255,0.5);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n transform: translateY(6px);\r\n opacity: 0;\r\n transition: opacity 0.3s, transform 0.3s, background 0.2s;\r\n border-bottom: 3px solid var(--accent-color);\r\n }\r\n\r\n .card-featured:hover .shop-link {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .shop-link:hover {\r\n background: white;\r\n color: #121212;\r\n border-color: transparent;\r\n gap: 0.8rem;\r\n }\r\n\r\n .shop-link i {\r\n font-size: 0.9rem;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .shop-link:hover i {\r\n transform: translateX(5px);\r\n }\r\n\r\n .feat-1 { --accent-color: #ff4d6d; }\r\n .feat-2 { --accent-color: #4d9fff; }\r\n .feat-3 { --accent-color: #7b2eda; }\r\n .feat-4 { --accent-color: #ffb347; }\r\n\r\n \/* ===== BANNER 2: more ways to listen (4 products) ===== *\/\r\n .banner-four {\r\n position: relative;\r\n z-index: 20;\r\n padding: 1.8rem 8% 2rem;\r\n background: transparent;\r\n }\r\n\r\n .banner-four h2 {\r\n color: white;\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 1.5rem;\r\n text-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n .banner-four h2 i {\r\n background: rgba(255,255,255,0.2);\r\n padding: 12px;\r\n border-radius: 50%;\r\n font-size: 1.8rem;\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .card-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 2rem;\r\n }\r\n\r\n .product-card {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 1.2rem 1rem 1.2rem 1rem;\r\n border-radius: 2.5rem 0.5rem 2.5rem 0.5rem;\r\n background: transparent;\r\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;\r\n box-shadow: 0 25px 40px -18px rgba(0, 0, 0, 0.4);\r\n isolation: isolate;\r\n overflow: hidden;\r\n backdrop-filter: blur(2px);\r\n }\r\n\r\n .product-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(168deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 40%);\r\n clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n z-index: -2;\r\n border-radius: inherit;\r\n transition: clip-path 0.3s;\r\n }\r\n\r\n .product-card::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--card-color);\r\n clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 0% 100%);\r\n z-index: -3;\r\n border-radius: inherit;\r\n opacity: 0.96;\r\n box-shadow: inset -3px 0 12px rgba(0,0,0,0.2);\r\n }\r\n\r\n .diagonal-flare {\r\n position: absolute;\r\n top: -80%;\r\n left: -80%;\r\n width: 250%;\r\n height: 250%;\r\n background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.25) 45%, transparent 60%);\r\n transform: rotate(30deg) translateY(10%);\r\n transition: transform 0.8s cubic-bezier(0.25, 0.75, 0.5, 1.2);\r\n pointer-events: none;\r\n z-index: -1;\r\n }\r\n\r\n .product-card:hover .diagonal-flare {\r\n transform: rotate(30deg) translateY(-25%) translateX(20%);\r\n }\r\n\r\n .card-price {\r\n align-self: flex-end;\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n letter-spacing: -0.03em;\r\n color: white;\r\n text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);\r\n background: rgba(10, 10, 10, 0.2);\r\n backdrop-filter: blur(8px);\r\n padding: 0.1rem 1rem 0.1rem 1.2rem;\r\n border-radius: 50px 0 0 50px;\r\n border-left: 4px solid rgba(255,255,255,0.8);\r\n margin-bottom: 0.5rem;\r\n transition: transform 0.2s, background 0.2s;\r\n line-height: 1.2;\r\n }\r\n\r\n .product-card:hover .card-price {\r\n transform: scale(1.02) translateX(-5px);\r\n background: rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .product-image {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 150px;\r\n width: 100%;\r\n margin: 0 0 0.8rem 0;\r\n }\r\n\r\n .product-image::before {\r\n content: '';\r\n position: absolute;\r\n width: 150px;\r\n height: 150px;\r\n background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 75%);\r\n border-radius: 50%;\r\n opacity: 0.7;\r\n transform: scale(0.9);\r\n transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.3s;\r\n box-shadow: 0 0 0 3px rgba(255,255,255,0.2) inset, 0 15px 30px -8px black;\r\n z-index: 1;\r\n }\r\n\r\n .product-image::after {\r\n content: '';\r\n position: absolute;\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n border: 2px dotted rgba(255,255,255,0.6);\r\n opacity: 0.5;\r\n transform: scale(0.9);\r\n transition: transform 0.6s ease, opacity 0.3s, border-color 0.2s;\r\n z-index: 2;\r\n }\r\n\r\n .product-card:hover .product-image::before {\r\n transform: scale(1.25);\r\n box-shadow: 0 0 0 6px rgba(255,255,255,0.3) inset, 0 20px 40px -5px black;\r\n }\r\n\r\n .product-card:hover .product-image::after {\r\n transform: scale(1.1);\r\n opacity: 0.9;\r\n border-color: rgba(255,255,255,0.9);\r\n }\r\n\r\n .product-image img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n position: relative;\r\n z-index: 5;\r\n filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4));\r\n transition: transform 0.3s ease, filter 0.3s;\r\n transform: rotate(0deg) scale(1);\r\n }\r\n\r\n .product-card:hover .product-image img {\r\n transform: rotate(-6deg) scale(1.1);\r\n filter: drop-shadow(0 18px 25px black);\r\n }\r\n\r\n .product-label {\r\n text-align: left;\r\n margin: 0 0 0.8rem 0;\r\n }\r\n\r\n .product-label .product-category {\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.7);\r\n margin-bottom: 0.1rem;\r\n transition: letter-spacing 0.2s;\r\n }\r\n\r\n .product-label .product-name {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n line-height: 1;\r\n color: white;\r\n text-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n text-transform: uppercase;\r\n transition: transform 0.2s, text-shadow 0.2s;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .product-card:hover .product-category {\r\n letter-spacing: 0.3em;\r\n }\r\n\r\n .product-card:hover .product-name {\r\n transform: translateX(5px);\r\n text-shadow: 4px 4px 8px rgba(0,0,0,0.3);\r\n }\r\n\r\n .buy-now {\r\n margin-top: 0.2rem;\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n .buy-btn {\r\n background: rgba(255,255,255,0.15);\r\n backdrop-filter: blur(12px);\r\n padding: 0.6rem 1.6rem;\r\n border-radius: 50px;\r\n color: white;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n text-decoration: none;\r\n letter-spacing: 1.2px;\r\n border: 2px solid rgba(255,255,255,0.5);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n transform: translateY(6px);\r\n opacity: 0;\r\n transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, box-shadow 0.2s, gap 0.2s;\r\n box-shadow: 0 5px 20px -5px rgba(0,0,0,0.5);\r\n cursor: pointer;\r\n border-bottom: 4px solid white;\r\n text-transform: uppercase;\r\n }\r\n\r\n .product-card:hover .buy-btn {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .buy-btn:hover {\r\n background: white;\r\n color: #121212;\r\n border-color: transparent;\r\n box-shadow: 0 15px 30px -5px black;\r\n gap: 0.8rem;\r\n }\r\n\r\n .buy-btn i {\r\n font-size: 0.9rem;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .buy-btn:hover i {\r\n transform: translateX(6px) rotate(5deg);\r\n }\r\n\r\n .card-1 { --card-color: #4e2a6b; }\r\n .card-2 { --card-color: #1e6f6b; }\r\n .card-3 { --card-color: #c5541c; }\r\n .card-4 { --card-color: #1f4a6f; }\r\n\r\n .card-1::after { background: linear-gradient(140deg, #7d40b0, #3f1e5e); }\r\n .card-2::after { background: linear-gradient(140deg, #2a9b96, #165755); }\r\n .card-3::after { background: linear-gradient(140deg, #f56f37, #a94410); }\r\n .card-4::after { background: linear-gradient(140deg, #2b6a9e, #12344d); }\r\n\r\n .product-card:hover {\r\n transform: translateY(-12px) scale(1.02);\r\n box-shadow: 0 35px 50px -20px black;\r\n }\r\n\r\n \/* ===== VIDEO ADVERTISEMENT BANNER (updated with YouTube embed) ===== *\/\r\n .video-banner {\r\n position: relative;\r\n width: 100%;\r\n height: 80vh;\r\n min-height: 500px;\r\n overflow: hidden;\r\n z-index: 15;\r\n margin-top: 2rem;\r\n }\r\n .video-container {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n .video-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none; \/* Prevents interaction with the video so overlay works *\/\r\n border: none;\r\n }\r\n .video-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: white;\r\n backdrop-filter: blur(2px);\r\n z-index: 2;\r\n }\r\n .video-content {\r\n max-width: 800px;\r\n padding: 2rem;\r\n }\r\n .video-content h2 {\r\n font-size: 4rem;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: -1px;\r\n margin-bottom: 1rem;\r\n text-shadow: 0 4px 20px rgba(0,0,0,0.5);\r\n }\r\n .video-content p {\r\n font-size: 1.3rem;\r\n margin-bottom: 2rem;\r\n opacity: 0.9;\r\n }\r\n .video-btn {\r\n background: white;\r\n color: #ff7a00;\r\n padding: 16px 48px;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n transition: 0.3s;\r\n border: 2px solid transparent;\r\n }\r\n .video-btn:hover {\r\n background: transparent;\r\n color: white;\r\n border-color: white;\r\n transform: scale(1.05);\r\n gap: 15px;\r\n }\r\n .video-btn i {\r\n font-size: 1.2rem;\r\n }\r\n\r\n \/* ===== LIMITED EDITION (2 products) ===== *\/\r\n .banner-two {\r\n position: relative;\r\n z-index: 20;\r\n padding: 2rem 8% 3rem;\r\n background: transparent;\r\n }\r\n\r\n .banner-two h2 {\r\n color: white;\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 1.5rem;\r\n text-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n }\r\n .banner-two h2 i {\r\n background: rgba(255,255,255,0.2);\r\n padding: 12px;\r\n border-radius: 50%;\r\n font-size: 1.8rem;\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .card-grid-two {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 2rem;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n }\r\n\r\n .card-two {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n padding: 1.5rem 1.5rem 1.5rem 1.5rem;\r\n border-radius: 3rem 0.8rem 3rem 0.8rem;\r\n background: rgba(255,255,255,0.1);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255,255,255,0.3);\r\n transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;\r\n box-shadow: 0 25px 40px -18px rgba(0, 0, 0, 0.5);\r\n overflow: hidden;\r\n color: white;\r\n }\r\n\r\n .card-two:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n box-shadow: 0 35px 50px -20px black;\r\n background: rgba(255,255,255,0.2);\r\n }\r\n\r\n .two-price {\r\n align-self: flex-end;\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n color: white;\r\n text-shadow: 0 4px 12px rgba(0,0,0,0.3);\r\n background: rgba(0,0,0,0.2);\r\n backdrop-filter: blur(4px);\r\n padding: 0.2rem 1.2rem 0.2rem 1.5rem;\r\n border-radius: 60px 0 0 60px;\r\n border-left: 4px solid var(--two-color);\r\n margin-bottom: 1rem;\r\n transition: transform 0.2s;\r\n }\r\n\r\n .card-two:hover .two-price {\r\n transform: scale(1.02) translateX(-5px);\r\n }\r\n\r\n .two-image {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 200px;\r\n width: 100%;\r\n margin: 0 0 1.5rem 0;\r\n }\r\n\r\n .two-image::before {\r\n content: '';\r\n position: absolute;\r\n width: 180px;\r\n height: 180px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 70%);\r\n z-index: 1;\r\n }\r\n\r\n .two-image img {\r\n max-width: 100%;\r\n max-height: 100%;\r\n object-fit: contain;\r\n position: relative;\r\n z-index: 2;\r\n filter: drop-shadow(0 15px 20px rgba(0,0,0,0.4));\r\n transition: transform 0.3s;\r\n }\r\n\r\n .card-two:hover .two-image img {\r\n transform: scale(1.1) rotate(-3deg);\r\n }\r\n\r\n .two-label {\r\n text-align: left;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .two-category {\r\n font-size: 1rem;\r\n font-weight: 500;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.7);\r\n margin-bottom: 0.2rem;\r\n }\r\n\r\n .two-title {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n line-height: 1.1;\r\n color: white;\r\n text-transform: uppercase;\r\n }\r\n\r\n .two-description {\r\n font-size: 0.95rem;\r\n color: rgba(255,255,255,0.8);\r\n margin-bottom: 1.5rem;\r\n line-height: 1.5;\r\n }\r\n\r\n .two-btn-wrapper {\r\n display: flex;\r\n justify-content: flex-end;\r\n }\r\n\r\n .two-btn {\r\n background: rgba(255,255,255,0.2);\r\n backdrop-filter: blur(10px);\r\n padding: 0.8rem 2rem;\r\n border-radius: 50px;\r\n color: white;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n text-decoration: none;\r\n letter-spacing: 1px;\r\n border: 2px solid rgba(255,255,255,0.5);\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.7rem;\r\n transition: 0.3s;\r\n border-bottom: 4px solid var(--two-color);\r\n }\r\n\r\n .card-two:hover .two-btn {\r\n background: white;\r\n color: #121212;\r\n border-color: transparent;\r\n gap: 1rem;\r\n }\r\n\r\n .two-btn i {\r\n transition: transform 0.2s;\r\n }\r\n\r\n .two-btn:hover i {\r\n transform: translateX(5px);\r\n }\r\n\r\n .two-1 { --two-color: #d44c9e; }\r\n .two-2 { --two-color: #3da5d9; }\r\n\r\n \/* ===== FOOTER ===== *\/\r\n footer {\r\n background: rgba(0, 0, 0, 0.3);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-top: 1px solid rgba(255,255,255,0.2);\r\n padding: 4rem 8% 2rem;\r\n margin-top: 4rem;\r\n color: white;\r\n z-index: 20;\r\n position: relative;\r\n }\r\n .footer-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1fr 2fr;\r\n gap: 3rem;\r\n margin-bottom: 3rem;\r\n }\r\n .footer-col h3 {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 1.5rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n color: rgba(255,255,255,0.9);\r\n }\r\n .footer-col p {\r\n color: rgba(255,255,255,0.7);\r\n line-height: 1.6;\r\n margin-bottom: 1.5rem;\r\n }\r\n .footer-logo {\r\n font-size: 2rem;\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n }\r\n .footer-logo i {\r\n margin-right: 8px;\r\n color: #ffaa33;\r\n }\r\n .footer-links {\r\n list-style: none;\r\n }\r\n .footer-links li {\r\n margin-bottom: 0.8rem;\r\n }\r\n .footer-links a {\r\n color: rgba(255,255,255,0.7);\r\n text-decoration: none;\r\n transition: 0.2s;\r\n }\r\n .footer-links a:hover {\r\n color: white;\r\n padding-left: 5px;\r\n }\r\n .social-links {\r\n display: flex;\r\n gap: 1rem;\r\n margin-top: 1rem;\r\n }\r\n .social-links a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n height: 40px;\r\n background: rgba(255,255,255,0.1);\r\n border-radius: 50%;\r\n color: white;\r\n font-size: 1.2rem;\r\n transition: 0.2s;\r\n }\r\n .social-links a:hover {\r\n background: white;\r\n color: #ff7a00;\r\n transform: translateY(-3px);\r\n }\r\n .newsletter-form {\r\n display: flex;\r\n margin-top: 1rem;\r\n }\r\n .newsletter-form input {\r\n flex: 1;\r\n padding: 12px 16px;\r\n border: none;\r\n border-radius: 40px 0 0 40px;\r\n background: rgba(255,255,255,0.2);\r\n color: white;\r\n outline: none;\r\n }\r\n .newsletter-form input::placeholder {\r\n color: rgba(255,255,255,0.6);\r\n }\r\n .newsletter-form button {\r\n background: white;\r\n border: none;\r\n border-radius: 0 40px 40px 0;\r\n padding: 0 20px;\r\n color: #ff7a00;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n .newsletter-form button:hover {\r\n background: #ffeedd;\r\n }\r\n .footer-bottom {\r\n text-align: center;\r\n padding-top: 2rem;\r\n border-top: 1px solid rgba(255,255,255,0.2);\r\n color: rgba(255,255,255,0.6);\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* entrance animations *\/\r\n .product-card {\r\n animation: cardFloat 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;\r\n }\r\n .card-featured {\r\n animation: fadeUp 0.6s ease backwards;\r\n }\r\n .card-two {\r\n animation: fadeUp 0.7s ease backwards;\r\n }\r\n @keyframes cardFloat {\r\n 0% { opacity: 0; transform: translateY(40px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n @keyframes fadeUp {\r\n 0% { opacity: 0; transform: translateY(30px); }\r\n 100% { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .product-card:nth-child(1) { animation-delay: 0.1s; }\r\n .product-card:nth-child(2) { animation-delay: 0.2s; }\r\n .product-card:nth-child(3) { animation-delay: 0.3s; }\r\n .product-card:nth-child(4) { animation-delay: 0.4s; }\r\n .card-featured:nth-child(1) { animation-delay: 0.1s; }\r\n .card-featured:nth-child(2) { animation-delay: 0.2s; }\r\n .card-featured:nth-child(3) { animation-delay: 0.3s; }\r\n .card-featured:nth-child(4) { animation-delay: 0.4s; }\r\n .card-two:nth-child(1) { animation-delay: 0.2s; }\r\n .card-two:nth-child(2) { animation-delay: 0.3s; }\r\n\r\n \/* button clicked state *\/\r\n .buy-btn.clicked, .shop-link.clicked, .video-btn.clicked, .two-btn.clicked {\r\n background: #1e2a3a;\r\n color: white;\r\n border-color: #7f8fa6;\r\n pointer-events: none;\r\n gap: 0.6rem;\r\n }\r\n .buy-btn.clicked i, .shop-link.clicked i, .video-btn.clicked i, .two-btn.clicked i {\r\n animation: cartBump 0.3s ease;\r\n }\r\n @keyframes cartBump {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.3); }\r\n 100% { transform: scale(1); }\r\n }\r\n\r\n header {\r\n z-index: 200;\r\n }\r\n\r\n \/* ===== RESPONSIVE ===== *\/\r\n @media (max-width: 1100px) {\r\n .card-grid-featured, .card-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n .banner-featured h2, .banner-four h2, .banner-two h2 {\r\n font-size: 2rem;\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n .card-grid-two {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .card-grid-featured, .card-grid, .card-grid-two {\r\n gap: 1rem;\r\n }\r\n .card-featured, .product-card, .card-two {\r\n padding: 0.8rem 0.8rem;\r\n }\r\n .featured-price, .card-price, .two-price {\r\n font-size: 1.8rem;\r\n padding: 0.1rem 0.8rem 0.1rem 1rem;\r\n }\r\n .featured-image, .product-image, .two-image {\r\n height: 110px;\r\n }\r\n .featured-image::before {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n .featured-category, .product-category, .two-category {\r\n font-size: 0.65rem;\r\n }\r\n .featured-title, .product-name, .two-title {\r\n font-size: 1.2rem;\r\n }\r\n .shop-link, .buy-btn, .two-btn {\r\n padding: 0.4rem 1rem;\r\n font-size: 0.7rem;\r\n gap: 0.3rem;\r\n }\r\n .banner-featured h2, .banner-four h2, .banner-two h2 {\r\n font-size: 1.5rem;\r\n margin-bottom: 1rem;\r\n }\r\n .banner-featured h2 i, .banner-four h2 i, .banner-two h2 i {\r\n font-size: 1.2rem;\r\n padding: 6px;\r\n }\r\n .video-content h2 {\r\n font-size: 2.5rem;\r\n }\r\n .video-content p {\r\n font-size: 1rem;\r\n }\r\n .video-btn {\r\n padding: 12px 32px;\r\n font-size: 1rem;\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n gap: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- LIQUID BACKGROUND -->\r\n <div class=\"liquid\">\r\n <div class=\"blob blob1\"><\/div>\r\n <div class=\"blob blob2\"><\/div>\r\n <div class=\"blob blob3\"><\/div>\r\n <\/div>\r\n\r\n <!-- HEADER with advanced product search (category dropdown + autocomplete) -->\r\n <header>\r\n <div class=\"logo\"><i class=\"fas fa-headphones\"><\/i> SONICSPHERE<\/div>\r\n \r\n <div class=\"search-wrapper\">\r\n <form role=\"search\" method=\"get\" class=\"search-form\" action=\"https:\/\/hithotprodcut.com\/\">\r\n <input type=\"hidden\" name=\"post_type\" value=\"product\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <!-- Category dropdown -->\r\n <select name=\"product_cat\">\r\n <option value=\"\">All Categories<\/option>\r\n <option value=\"headphones\">Headphones<\/option>\r\n <option value=\"vr-headsets\">VR Headsets<\/option>\r\n <option value=\"smartwatches\">Smartwatches<\/option>\r\n <option value=\"earbuds\">Earbuds<\/option>\r\n <\/select>\r\n <input type=\"search\" name=\"s\" id=\"search-input\" placeholder=\"Search headphones...\" value=\"<?php echo get_search_query(); ?>\" autocomplete=\"off\" required>\r\n <button type=\"submit\">Go<\/button>\r\n <\/form>\r\n <!-- Suggestions box -->\r\n <div class=\"suggestions-box\" id=\"suggestions-box\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"header-actions\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"cart-link\" target=\"_self\">\r\n <i class=\"fas fa-shopping-cart\"><\/i>\r\n <span>2<\/span>\r\n <\/a>\r\n <nav>\r\n <ul>\r\n <li><a href=\"#\">Store<\/a><\/li>\r\n <li><a href=\"#\">Series<\/a><\/li>\r\n <li><a href=\"#\">Support<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- RATING FLOAT -->\r\n <div class=\"rating-float\">\r\n <i class=\"fas fa-star\"><\/i> <span>4.9 (12k+ reviews)<\/span>\r\n <\/div>\r\n\r\n <!-- HERO SECTION (unchanged) -->\r\n <section class=\"hero\">\r\n <div class=\"glass-card\">\r\n <span class=\"badge\"><i class=\"fas fa-bolt\"><\/i> limited edition \u00b7 immersive audio<\/span>\r\n <h1>SOUND<br>ELEVATED<\/h1>\r\n <div class=\"desc\">\r\n Ultra\u2011premium wireless headphones with adaptive noise cancellation, spatial audio, and 40h battery.\r\n <\/div>\r\n <div class=\"specs\">\r\n <div class=\"spec-item\"><i class=\"fas fa-battery-full\"><\/i> 40h<\/div>\r\n <div class=\"spec-item\"><i class=\"fas fa-wifi\"><\/i> BT 5.4<\/div>\r\n <div class=\"spec-item\"><i class=\"fas fa-water\"><\/i> IPX5<\/div>\r\n <\/div>\r\n <div class=\"price-row\">\r\n <div class=\"price\"><small>$<\/small>279 <small>.99<\/small><\/div>\r\n <\/div>\r\n <div class=\"color-picker\">\r\n <div class=\"color-label\">choose finish<\/div>\r\n <div class=\"color-dots\">\r\n <span class=\"color-dot orange\" data-color=\"orange\"><\/span>\r\n <span class=\"color-dot blue\" data-color=\"blue\"><\/span>\r\n <span class=\"color-dot black\" data-color=\"black\"><\/span>\r\n <span class=\"color-dot yellow\" data-color=\"yellow\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"btn-wrapper\">\r\n <button class=\"btn\" id=\"shopBtn\"><span>Buy now<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n <\/div>\r\n <p style=\"font-size: 12px; margin-top: 18px; opacity: 0.7;\"><i class=\"fas fa-truck\"><\/i> free express shipping \u00b7 2 year warranty<\/p>\r\n <\/div>\r\n\r\n <!-- right slider -->\r\n <div class=\"product-area\" id=\"productArea\">\r\n <div class=\"sound-ring\"><\/div>\r\n <div class=\"sound-ring sound-ring2\"><\/div>\r\n <div class=\"pedestal-glow\"><\/div>\r\n <div class=\"slider-container\" id=\"sliderContainer\">\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slide active\" data-color=\"orange\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-4.png\" alt=\"Orange Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+4'\">\r\n <\/div>\r\n <div class=\"slide\" data-color=\"blue\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-3.png\" alt=\"Blue Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+3'\">\r\n <\/div>\r\n <div class=\"slide\" data-color=\"black\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-2.png\" alt=\"Black Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+2'\">\r\n <\/div>\r\n <div class=\"slide\" data-color=\"yellow\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-1.png\" alt=\"Yellow Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/300x300?text=Image+1'\">\r\n <\/div>\r\n <\/div>\r\n <button class=\"slider-btn prev\" id=\"prevSlide\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n <button class=\"slider-btn next\" id=\"nextSlide\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n <div class=\"slider-dots\" id=\"sliderDots\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== BANNER 1: featured picks (4 products) ===== -->\r\n <section class=\"banner-featured\">\r\n <h2><i class=\"fas fa-star\"><\/i> featured picks<\/h2>\r\n <div class=\"card-grid-featured\">\r\n <!-- card 1 -->\r\n <div class=\"card-featured feat-1\">\r\n <div class=\"featured-price\">$69<\/div>\r\n <div class=\"featured-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-1.png\" alt=\"Headphones model 1\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+1'\">\r\n <\/div>\r\n <div class=\"featured-label\">\r\n <div class=\"featured-category\">PRODUCT<\/div>\r\n <div class=\"featured-title\">NAME<\/div>\r\n <\/div>\r\n <div class=\"shop-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"shop-link\" data-item=\"69\"><span>SHOP NOW<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 2 -->\r\n <div class=\"card-featured feat-2\">\r\n <div class=\"featured-price\">$79<\/div>\r\n <div class=\"featured-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-2.png\" alt=\"Headphones model 2\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+2'\">\r\n <\/div>\r\n <div class=\"featured-label\">\r\n <div class=\"featured-category\">PRODUCT<\/div>\r\n <div class=\"featured-title\">NAME<\/div>\r\n <\/div>\r\n <div class=\"shop-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"shop-link\" data-item=\"79\"><span>SHOP NOW<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 3 -->\r\n <div class=\"card-featured feat-3\">\r\n <div class=\"featured-price\">$89<\/div>\r\n <div class=\"featured-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-3.png\" alt=\"Headphones model 3\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+3'\">\r\n <\/div>\r\n <div class=\"featured-label\">\r\n <div class=\"featured-category\">PRODUCT<\/div>\r\n <div class=\"featured-title\">NAME<\/div>\r\n <\/div>\r\n <div class=\"shop-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"shop-link\" data-item=\"89\"><span>SHOP NOW<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 4 -->\r\n <div class=\"card-featured feat-4\">\r\n <div class=\"featured-price\">$99<\/div>\r\n <div class=\"featured-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-4.png\" alt=\"Headphones model 4\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+4'\">\r\n <\/div>\r\n <div class=\"featured-label\">\r\n <div class=\"featured-category\">PRODUCT<\/div>\r\n <div class=\"featured-title\">NAME<\/div>\r\n <\/div>\r\n <div class=\"shop-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"shop-link\" data-item=\"99\"><span>SHOP NOW<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== BANNER 2: more ways to listen (4 products) ===== -->\r\n <section class=\"banner-four\">\r\n <h2><i class=\"fas fa-headphones\"><\/i> more ways to listen<\/h2>\r\n <div class=\"card-grid\">\r\n <!-- card 1 (purple) -->\r\n <div class=\"product-card card-1\">\r\n <div class=\"diagonal-flare\"><\/div>\r\n <div class=\"card-price\">$69<\/div>\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-1.png\" alt=\"Headphones model 1\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+1'\">\r\n <\/div>\r\n <div class=\"product-label\">\r\n <div class=\"product-category\">PRODUCT<\/div>\r\n <div class=\"product-name\">NAME<\/div>\r\n <\/div>\r\n <div class=\"buy-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"buy-btn\" data-item=\"69\" target=\"_self\"><span>BUY NOW<\/span> <i class=\"fas fa-shopping-cart\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 2 (teal) -->\r\n <div class=\"product-card card-2\">\r\n <div class=\"diagonal-flare\"><\/div>\r\n <div class=\"card-price\">$79<\/div>\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-2.png\" alt=\"Headphones model 2\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+2'\">\r\n <\/div>\r\n <div class=\"product-label\">\r\n <div class=\"product-category\">PRODUCT<\/div>\r\n <div class=\"product-name\">NAME<\/div>\r\n <\/div>\r\n <div class=\"buy-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"buy-btn\" data-item=\"79\" target=\"_self\"><span>BUY NOW<\/span> <i class=\"fas fa-shopping-cart\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 3 (orange) -->\r\n <div class=\"product-card card-3\">\r\n <div class=\"diagonal-flare\"><\/div>\r\n <div class=\"card-price\">$89<\/div>\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-3.png\" alt=\"Headphones model 3\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+3'\">\r\n <\/div>\r\n <div class=\"product-label\">\r\n <div class=\"product-category\">PRODUCT<\/div>\r\n <div class=\"product-name\">NAME<\/div>\r\n <\/div>\r\n <div class=\"buy-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"buy-btn\" data-item=\"89\" target=\"_self\"><span>BUY NOW<\/span> <i class=\"fas fa-shopping-cart\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 4 (navy) -->\r\n <div class=\"product-card card-4\">\r\n <div class=\"diagonal-flare\"><\/div>\r\n <div class=\"card-price\">$99<\/div>\r\n <div class=\"product-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-4.png\" alt=\"Headphones model 4\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Image+4'\">\r\n <\/div>\r\n <div class=\"product-label\">\r\n <div class=\"product-category\">PRODUCT<\/div>\r\n <div class=\"product-name\">NAME<\/div>\r\n <\/div>\r\n <div class=\"buy-now\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"buy-btn\" data-item=\"99\" target=\"_self\"><span>BUY NOW<\/span> <i class=\"fas fa-shopping-cart\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== VIDEO ADVERTISEMENT BANNER (updated with YouTube embed) ===== -->\r\n <section class=\"video-banner\">\r\n <div class=\"video-container\">\r\n <!-- YouTube embed with autoplay, mute, loop, and no controls -->\r\n <iframe src=\"https:\/\/www.youtube.com\/embed\/ADnh7Jw5ec0?autoplay=1&mute=1&loop=1&playlist=ADnh7Jw5ec0&controls=0&showinfo=0&rel=0&modestbranding=1\" allow=\"autoplay; encrypted-media\" allowfullscreen><\/iframe>\r\n <\/div>\r\n <div class=\"video-overlay\">\r\n <div class=\"video-content\">\r\n <h2>Feel the Music<\/h2>\r\n <p>Experience sound like never before with our latest collection.<\/p>\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"video-btn\" id=\"videoShopBtn\"><span>Shop the sale<\/span> <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== LIMITED EDITION (2 products) ===== -->\r\n <section class=\"banner-two\">\r\n <h2><i class=\"fas fa-gem\"><\/i> limited edition<\/h2>\r\n <div class=\"card-grid-two\">\r\n <!-- card 1 -->\r\n <div class=\"card-two two-1\">\r\n <div class=\"two-price\">$149<\/div>\r\n <div class=\"two-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-1.png\" alt=\"Premium Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Premium'\">\r\n <\/div>\r\n <div class=\"two-label\">\r\n <div class=\"two-category\">PRODUCT<\/div>\r\n <div class=\"two-title\">STUDIO PRO<\/div>\r\n <\/div>\r\n <div class=\"two-description\">\r\n Professional\u2011grade sound with active noise cancellation and 50h battery life.\r\n <\/div>\r\n <div class=\"two-btn-wrapper\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"two-btn\" data-item=\"149\"><span>BUY NOW<\/span> <i class=\"fas fa-shopping-cart\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- card 2 -->\r\n <div class=\"card-two two-2\">\r\n <div class=\"two-price\">$199<\/div>\r\n <div class=\"two-image\">\r\n <img decoding=\"async\" src=\"https:\/\/hithotprodcut.com\/wp-content\/uploads\/2026\/02\/image-removebg-preview-2.png\" alt=\"Ultra Headphones\" onerror=\"this.src='https:\/\/via.placeholder.com\/200?text=Ultra'\">\r\n <\/div>\r\n <div class=\"two-label\">\r\n <div class=\"two-category\">PRODUCT<\/div>\r\n <div class=\"two-title\">ULTRA MAX<\/div>\r\n <\/div>\r\n <div class=\"two-description\">\r\n Wireless, water\u2011resistant, with spatial audio and fast charging.\r\n <\/div>\r\n <div class=\"two-btn-wrapper\">\r\n <a href=\"https:\/\/hithotprodcut.com\/\" class=\"two-btn\" data-item=\"199\"><span>BUY NOW<\/span> <i class=\"fas fa-shopping-cart\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== FOOTER ===== -->\r\n <footer>\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-col\">\r\n <div class=\"footer-logo\"><i class=\"fas fa-headphones\"><\/i> SONICSPHERE<\/div>\r\n <p>Premium audio gear for the modern listener. We bring sound to life with cutting\u2011edge technology and design.<\/p>\r\n <div class=\"social-links\">\r\n <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n <a href=\"#\"><i class=\"fab fa-youtube\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h3>Shop<\/h3>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#\">Headphones<\/a><\/li>\r\n <li><a href=\"#\">VR Headsets<\/a><\/li>\r\n <li><a href=\"#\">Smartwatches<\/a><\/li>\r\n <li><a href=\"#\">Earbuds<\/a><\/li>\r\n <li><a href=\"#\">Accessories<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h3>Support<\/h3>\r\n <ul class=\"footer-links\">\r\n <li><a href=\"#\">Contact Us<\/a><\/li>\r\n <li><a href=\"#\">FAQs<\/a><\/li>\r\n <li><a href=\"#\">Shipping & Returns<\/a><\/li>\r\n <li><a href=\"#\">Warranty<\/a><\/li>\r\n <li><a href=\"#\">Privacy Policy<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h3>Newsletter<\/h3>\r\n <p>Subscribe for exclusive offers and the latest news.<\/p>\r\n <div class=\"newsletter-form\">\r\n <input type=\"email\" placeholder=\"Your email\">\r\n <button type=\"submit\"><i class=\"fas fa-paper-plane\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n © 2026 SONICSPHERE. All rights reserved. | Designed with <i class=\"fas fa-heart\" style=\"color: #ff4d6d;\"><\/i> for music lovers.\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- SCRIPTS (original slider + autocomplete + button redirects) -->\r\n <script>\r\n (function() {\r\n \/\/ ---- original slider logic (unchanged) ----\r\n const slides = document.querySelectorAll('.slide');\r\n const prevBtn = document.getElementById('prevSlide');\r\n const nextBtn = document.getElementById('nextSlide');\r\n const dotsContainer = document.getElementById('sliderDots');\r\n const colorDots = document.querySelectorAll('.color-dot');\r\n const body = document.body;\r\n const gradients = {\r\n orange: 'linear-gradient(145deg, #ff7a00, #ff9d2f)',\r\n blue: 'linear-gradient(145deg, #0066ff, #3b8cff)',\r\n black: 'linear-gradient(145deg, #2b2b2b, #4f4f4f)',\r\n yellow: 'linear-gradient(145deg, #f9d423, #fdaa33)'\r\n };\r\n let currentIndex = 0;\r\n\r\n function updateDots() {\r\n let dotsHtml = '';\r\n slides.forEach((_, idx) => {\r\n dotsHtml += `<span class=\"dot ${idx === currentIndex ? 'active' : ''}\" data-index=\"${idx}\"><\/span>`;\r\n });\r\n dotsContainer.innerHTML = dotsHtml;\r\n document.querySelectorAll('.dot').forEach(dot => {\r\n dot.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.dataset.index);\r\n goToSlide(index);\r\n });\r\n });\r\n }\r\n\r\n function goToSlide(index) {\r\n if (index < 0) index = slides.length - 1;\r\n if (index >= slides.length) index = 0;\r\n slides.forEach((slide, i) => {\r\n slide.classList.toggle('active', i === index);\r\n });\r\n currentIndex = index;\r\n updateDots();\r\n const activeColor = slides[index].dataset.color;\r\n body.style.background = gradients[activeColor] || gradients.orange;\r\n colorDots.forEach(dot => {\r\n const dotColor = dot.dataset.color;\r\n if (dotColor === activeColor) {\r\n dot.style.transform = 'scale(1.3)';\r\n dot.style.borderColor = 'white';\r\n } else {\r\n dot.style.transform = 'scale(1)';\r\n dot.style.borderColor = 'rgba(255,255,255,0.6)';\r\n }\r\n });\r\n }\r\n\r\n nextBtn.addEventListener('click', () => goToSlide(currentIndex + 1));\r\n prevBtn.addEventListener('click', () => goToSlide(currentIndex - 1));\r\n colorDots.forEach(dot => {\r\n dot.addEventListener('click', function() {\r\n const color = this.dataset.color;\r\n const targetIndex = { orange:0, blue:1, black:2, yellow:3 }[color] || 0;\r\n goToSlide(targetIndex);\r\n });\r\n });\r\n\r\n \/\/ 3D tilt\r\n const sliderContainer = document.getElementById('sliderContainer');\r\n document.addEventListener('mousemove', (e) => {\r\n const x = (window.innerWidth \/ 2 - e.pageX) \/ 30;\r\n const y = (window.innerHeight \/ 2 - e.pageY) \/ 30;\r\n sliderContainer.style.transform = `rotateY(${x}deg) rotateX(${y}deg) scale(1.02)`;\r\n });\r\n document.addEventListener('mouseleave', () => {\r\n sliderContainer.style.transform = 'rotateY(0deg) rotateX(0deg) scale(1)';\r\n });\r\n\r\n \/\/ shop button ripple\r\n const btn = document.getElementById('shopBtn');\r\n if (btn) {\r\n btn.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const originalHTML = this.innerHTML;\r\n this.innerHTML = '<span>Added to cart<\/span> <i class=\"fas fa-check\"><\/i>';\r\n this.style.background = '#1e1e1e';\r\n this.style.color = '#fff';\r\n const ripple = document.createElement('span');\r\n ripple.style.position = 'absolute';\r\n ripple.style.background = 'rgba(255,255,255,0.6)';\r\n ripple.style.width = '10px';\r\n ripple.style.height = '10px';\r\n ripple.style.borderRadius = '50%';\r\n ripple.style.transform = 'translate(-50%, -50%)';\r\n ripple.style.pointerEvents = 'none';\r\n ripple.style.left = e.offsetX + 'px';\r\n ripple.style.top = e.offsetY + 'px';\r\n ripple.style.animation = 'ripple 0.6s ease-out';\r\n this.appendChild(ripple);\r\n setTimeout(() => {\r\n this.innerHTML = originalHTML;\r\n this.style.background = '#fff';\r\n this.style.color = '#1e1e1e';\r\n ripple.remove();\r\n }, 1800);\r\n });\r\n }\r\n\r\n if (!document.querySelector('#rippleStyle')) {\r\n const style = document.createElement('style');\r\n style.id = 'rippleStyle';\r\n style.innerHTML = `@keyframes ripple { 0% { width: 0; height: 0; opacity: 0.7; } 100% { width: 300px; height: 300px; opacity: 0; } }`;\r\n document.head.appendChild(style);\r\n }\r\n\r\n goToSlide(0);\r\n\r\n \/\/ ---- ADVANCED SEARCH: autocomplete suggestions ----\r\n const searchInput = document.getElementById('search-input');\r\n const suggestionsBox = document.getElementById('suggestions-box');\r\n \r\n \/\/ Dummy product database for suggestions\r\n const products = [\r\n { name: 'Wireless Headphones Pro', category: 'Headphones' },\r\n { name: 'Noise Cancelling 3000', category: 'Headphones' },\r\n { name: 'Sport Earbuds', category: 'Earbuds' },\r\n { name: 'VR Immersive Set', category: 'VR Headsets' },\r\n { name: 'Smartwatch Elite', category: 'Smartwatches' },\r\n { name: 'Bass Boosted Headset', category: 'Headphones' },\r\n { name: 'Kids Headphones', category: 'Headphones' },\r\n { name: 'Fitness Tracker Watch', category: 'Smartwatches' },\r\n { name: 'Virtual Reality Pro', category: 'VR Headsets' },\r\n { name: 'True Wireless Earbuds', category: 'Earbuds' }\r\n ];\r\n\r\n if (searchInput) {\r\n searchInput.addEventListener('input', function() {\r\n const query = this.value.toLowerCase().trim();\r\n if (query.length < 1) {\r\n suggestionsBox.classList.remove('active');\r\n return;\r\n }\r\n \/\/ Filter products\r\n const matches = products.filter(p => p.name.toLowerCase().includes(query));\r\n if (matches.length === 0) {\r\n suggestionsBox.classList.remove('active');\r\n return;\r\n }\r\n \/\/ Build suggestions HTML\r\n let html = '';\r\n matches.forEach(p => {\r\n html += `<div class=\"suggestion-item\" data-name=\"${p.name}\">${p.name} <span class=\"product-cat\">${p.category}<\/span><\/div>`;\r\n });\r\n suggestionsBox.innerHTML = html;\r\n suggestionsBox.classList.add('active');\r\n\r\n \/\/ Add click listeners to suggestions\r\n document.querySelectorAll('.suggestion-item').forEach(item => {\r\n item.addEventListener('click', function() {\r\n searchInput.value = this.dataset.name;\r\n suggestionsBox.classList.remove('active');\r\n \/\/ Optionally submit the form or just fill\r\n });\r\n });\r\n });\r\n\r\n \/\/ Hide suggestions when clicking outside\r\n document.addEventListener('click', function(e) {\r\n if (!searchInput.contains(e.target) && !suggestionsBox.contains(e.target)) {\r\n suggestionsBox.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ ---- all action buttons (shop-link, buy-btn, video-btn, two-btn) show animation then redirect ----\r\n const actionButtons = document.querySelectorAll('.shop-link, .buy-btn, .video-btn, .two-btn');\r\n actionButtons.forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n if (btn.classList.contains('clicked')) return;\r\n const originalHTML = btn.innerHTML;\r\n const href = btn.getAttribute('href');\r\n btn.classList.add('clicked');\r\n btn.innerHTML = `<span>ADDED<\/span> <i class=\"fas fa-check\"><\/i>`;\r\n setTimeout(() => {\r\n window.location.href = href;\r\n }, 800);\r\n });\r\n });\r\n\r\n \/\/ hover effect for product area (unchanged)\r\n const productArea = document.getElementById('productArea');\r\n if (productArea) {\r\n productArea.addEventListener('mouseenter', () => {\r\n document.querySelector('.sound-ring').style.animationDuration = '1.8s';\r\n document.querySelector('.sound-ring2').style.animationDuration = '2.5s';\r\n });\r\n productArea.addEventListener('mouseleave', () => {\r\n document.querySelector('.sound-ring').style.animationDuration = '3s';\r\n document.querySelector('.sound-ring2').style.animationDuration = '4s';\r\n });\r\n }\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>sonicsphere \u00b7 advanced search + correct order SONICSPHERE All CategoriesHeadphonesVR HeadsetsSmartwatchesEarbuds<\/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-677","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/677","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=677"}],"version-history":[{"count":40,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/677\/revisions"}],"predecessor-version":[{"id":733,"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/pages\/677\/revisions\/733"}],"wp:attachment":[{"href":"https:\/\/hithotprodcut.com\/index.php\/wp-json\/wp\/v2\/media?parent=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}