Premium Marine Equipment<\/title>\r\n\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=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" \/>\r\n\r\n <style>\r\n \/* ============================================================\r\n RESET & BASE\r\n ============================================================ *\/\r\n *,\r\n *::before,\r\n *::after {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', sans-serif;\r\n background-color: #f4f6f9;\r\n color: #1a2a4a;\r\n line-height: 1.6;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n img {\r\n max-width: 100%;\r\n display: block;\r\n }\r\n\r\n \/* ============================================================\r\n UTILITY\r\n ============================================================ *\/\r\n .container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n }\r\n\r\n .section-padding {\r\n padding: 60px 0;\r\n }\r\n\r\n \/* ============================================================\r\n PAGE SECTIONS \u2014 show\/hide via JS + :target\r\n ============================================================ *\/\r\n .page-section {\r\n display: none;\r\n }\r\n\r\n #home {\r\n display: block;\r\n }\r\n\r\n .page-section.active-section {\r\n display: block;\r\n }\r\n\r\n \/* ============================================================\r\n SECTION 1 \u2014 PRODUCT SEGMENTS (HOME)\r\n ============================================================ *\/\r\n .segments-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 32px;\r\n margin-top: 40px;\r\n }\r\n\r\n .segment-card {\r\n position: relative;\r\n border-radius: 24px;\r\n overflow: hidden;\r\n min-height: 380px;\r\n background-size: cover;\r\n background-position: center;\r\n box-shadow: 0 20px 60px rgba(26, 42, 74, 0.15);\r\n transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),\r\n box-shadow 0.4s ease;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: flex-end;\r\n padding: 40px 36px;\r\n }\r\n\r\n .segment-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 30px 80px rgba(26, 42, 74, 0.25);\r\n }\r\n\r\n .segment-card .card-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n background-size: cover;\r\n background-position: center;\r\n transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n .segment-card:hover .card-bg {\r\n transform: scale(1.06);\r\n }\r\n\r\n .segment-card .overlay {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n background: linear-gradient(135deg,\r\n rgba(10, 22, 48, 0.82) 0%,\r\n rgba(18, 40, 80, 0.70) 100%);\r\n border-radius: 24px;\r\n }\r\n\r\n .segment-card .card-content {\r\n position: relative;\r\n z-index: 2;\r\n color: #ffffff;\r\n width: 100%;\r\n }\r\n\r\n .segment-card .card-top {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .segment-card .card-icon {\r\n font-size: 44px;\r\n color: rgba(255, 255, 255, 0.92);\r\n opacity: 0.9;\r\n filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));\r\n }\r\n\r\n .segment-card .badge-count {\r\n background: rgba(255, 255, 255, 0.18);\r\n backdrop-filter: blur(8px);\r\n padding: 4px 16px;\r\n border-radius: 40px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n letter-spacing: 0.3px;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n color: #fff;\r\n }\r\n\r\n .segment-card .card-title {\r\n font-size: 34px;\r\n font-weight: 700;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 10px;\r\n color: #fff;\r\n }\r\n\r\n .segment-card .card-desc {\r\n font-size: 15px;\r\n font-weight: 300;\r\n opacity: 0.85;\r\n max-width: 90%;\r\n line-height: 1.7;\r\n color: rgba(255, 255, 255, 0.92);\r\n }\r\n\r\n .segment-card .card-arrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-top: 18px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: #7eb8ff;\r\n letter-spacing: 0.5px;\r\n transition: gap 0.3s ease;\r\n }\r\n\r\n .segment-card:hover .card-arrow {\r\n gap: 14px;\r\n }\r\n\r\n .segment-card .card-arrow i {\r\n font-size: 13px;\r\n }\r\n\r\n \/* card backgrounds *\/\r\n .segment-card.nav-card .card-bg {\r\n background-image: url('https:\/\/placehold.co\/800x600\/0b1a3a\/ffffff?text=Navigation');\r\n background-size: cover;\r\n }\r\n\r\n .segment-card.comm-card .card-bg {\r\n background-image: url('https:\/\/placehold.co\/800x600\/0b1a3a\/ffffff?text=Communication');\r\n background-size: cover;\r\n }\r\n\r\n \/* fallback gradients *\/\r\n .segment-card.nav-card .card-bg {\r\n background: linear-gradient(145deg, #0b1a3a, #1a3a6a);\r\n }\r\n\r\n .segment-card.comm-card .card-bg {\r\n background: linear-gradient(145deg, #0b1a3a, #1a4a6a);\r\n }\r\n\r\n \/* ============================================================\r\n SECTION 2 \u2014 UNIFIED PRODUCT CATALOG\r\n ============================================================ *\/\r\n .catalog-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .catalog-header h2 {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: #0b1a3a;\r\n letter-spacing: -0.5px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .catalog-header h2 i {\r\n color: #1a4a7a;\r\n font-size: 26px;\r\n }\r\n\r\n .catalog-header .back-home {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: #4a5f7e;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: color 0.2s ease;\r\n text-decoration: none;\r\n }\r\n\r\n .catalog-header .back-home:hover {\r\n color: #0b1a3a;\r\n }\r\n\r\n .catalog-header .back-home i {\r\n font-size: 13px;\r\n }\r\n\r\n .catalog-layout {\r\n display: grid;\r\n grid-template-columns: 300px 1fr;\r\n gap: 32px;\r\n margin-top: 32px;\r\n align-items: start;\r\n }\r\n\r\n \/* ---- SIDEBAR ---- *\/\r\n .catalog-sidebar {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n padding: 28px 24px;\r\n box-shadow: 0 8px 40px rgba(26, 42, 74, 0.08);\r\n border: 1px solid rgba(26, 42, 74, 0.05);\r\n position: sticky;\r\n top: 24px;\r\n }\r\n\r\n .catalog-sidebar .sidebar-title {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #0b1a3a;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.3px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .catalog-sidebar .sidebar-title i {\r\n color: #1a4a7a;\r\n font-size: 18px;\r\n }\r\n\r\n .catalog-sidebar .search-box {\r\n position: relative;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .catalog-sidebar .search-box input {\r\n width: 100%;\r\n padding: 14px 18px 14px 48px;\r\n border: 2px solid #e8edf4;\r\n border-radius: 14px;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n background: #f8faff;\r\n transition: border-color 0.3s ease, box-shadow 0.3s ease;\r\n color: #1a2a4a;\r\n }\r\n\r\n .catalog-sidebar .search-box input:focus {\r\n outline: none;\r\n border-color: #1a4a7a;\r\n box-shadow: 0 0 0 4px rgba(26, 74, 122, 0.10);\r\n background: #ffffff;\r\n }\r\n\r\n .catalog-sidebar .search-box input::placeholder {\r\n color: #8a9bb5;\r\n font-weight: 300;\r\n }\r\n\r\n .catalog-sidebar .search-box .search-icon {\r\n position: absolute;\r\n left: 18px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #6a7f9e;\r\n font-size: 16px;\r\n }\r\n\r\n .catalog-sidebar .filter-group {\r\n margin-bottom: 26px;\r\n }\r\n\r\n .catalog-sidebar .filter-group:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .catalog-sidebar .filter-group label {\r\n display: block;\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: #0b1a3a;\r\n text-transform: uppercase;\r\n letter-spacing: 0.8px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .catalog-sidebar .filter-group .filter-item {\r\n display: flex;\r\n align-items: center;\r\n padding: 6px 0;\r\n font-size: 14px;\r\n color: #2a3f5e;\r\n font-weight: 400;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n border-bottom: 1px solid transparent;\r\n gap: 8px;\r\n }\r\n\r\n .catalog-sidebar .filter-group .filter-item:hover {\r\n color: #1a4a7a;\r\n }\r\n\r\n .catalog-sidebar .filter-group .filter-item i {\r\n font-size: 12px;\r\n color: #6a7f9e;\r\n width: 18px;\r\n text-align: center;\r\n }\r\n\r\n .catalog-sidebar .filter-group .filter-item .count {\r\n margin-left: auto;\r\n font-size: 12px;\r\n color: #8a9bb5;\r\n background: #eef2f8;\r\n padding: 0 10px;\r\n border-radius: 20px;\r\n font-weight: 400;\r\n }\r\n\r\n .catalog-sidebar .filter-divider {\r\n border: none;\r\n height: 1px;\r\n background: #e8edf4;\r\n margin: 20px 0;\r\n }\r\n\r\n \/* ---- MAIN PRODUCT AREA ---- *\/\r\n .catalog-products {\r\n min-height: 400px;\r\n }\r\n\r\n .catalog-products .list-header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 28px;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n }\r\n\r\n .catalog-products .list-header .segment-badge {\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: #ffffff;\r\n background: #0b1a3a;\r\n padding: 4px 20px;\r\n border-radius: 40px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .catalog-products .list-header .count-badge {\r\n font-size: 14px;\r\n font-weight: 400;\r\n color: #4a5f7e;\r\n background: #eef2f8;\r\n padding: 4px 18px;\r\n border-radius: 40px;\r\n }\r\n\r\n .catalog-products .product-grid {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 24px;\r\n }\r\n\r\n \/* ---- PRODUCT CATEGORY CARD (in list) ---- *\/\r\n .product-category-card {\r\n background: #ffffff;\r\n border-radius: 18px;\r\n padding: 24px 28px;\r\n box-shadow: 0 4px 20px rgba(26, 42, 74, 0.06);\r\n border: 1px solid rgba(26, 42, 74, 0.06);\r\n transition: box-shadow 0.3s ease;\r\n }\r\n\r\n .product-category-card:hover {\r\n box-shadow: 0 8px 32px rgba(26, 42, 74, 0.10);\r\n }\r\n\r\n .product-category-card .cat-header {\r\n background: #0b1a3a;\r\n color: #ffffff;\r\n padding: 8px 18px;\r\n border-radius: 10px;\r\n display: inline-block;\r\n font-size: 14px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .product-category-card .manufacturer-row {\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #1a4a7a;\r\n margin-bottom: 10px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .product-category-card .manufacturer-row i {\r\n font-size: 14px;\r\n color: #4a6a8a;\r\n }\r\n\r\n .product-category-card .product-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 6px 0;\r\n font-size: 14px;\r\n color: #2a3f5e;\r\n font-weight: 400;\r\n transition: color 0.2s ease;\r\n border-bottom: 1px solid transparent;\r\n }\r\n\r\n .product-category-card .product-item:hover {\r\n color: #1a4a7a;\r\n }\r\n\r\n .product-category-card .product-item .bullet {\r\n color: #1a4a7a;\r\n font-size: 12px;\r\n opacity: 0.6;\r\n }\r\n\r\n .product-category-card .product-item .product-link {\r\n color: inherit;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n width: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n .product-category-card .product-item .product-link i {\r\n font-size: 13px;\r\n color: #6a7f9e;\r\n opacity: 0;\r\n transition: opacity 0.2s ease, transform 0.2s ease;\r\n }\r\n\r\n .product-category-card .product-item:hover .product-link i {\r\n opacity: 1;\r\n transform: translateX(4px);\r\n }\r\n\r\n .product-category-card .product-divider {\r\n height: 1px;\r\n background: #eef2f8;\r\n margin: 8px 0 12px 0;\r\n }\r\n\r\n \/* empty state *\/\r\n .empty-state {\r\n text-align: center;\r\n padding: 60px 20px;\r\n background: #ffffff;\r\n border-radius: 18px;\r\n border: 1px solid rgba(26, 42, 74, 0.06);\r\n }\r\n\r\n .empty-state i {\r\n font-size: 48px;\r\n color: #c0cbd8;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .empty-state h3 {\r\n font-size: 20px;\r\n color: #0b1a3a;\r\n font-weight: 600;\r\n }\r\n\r\n .empty-state p {\r\n color: #4a5f7e;\r\n font-weight: 300;\r\n }\r\n\r\n \/* ============================================================\r\n SECTION 3 \u2014 PRODUCT DETAIL (REUSABLE)\r\n ============================================================ *\/\r\n .detail-wrapper {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 48px;\r\n background: #ffffff;\r\n border-radius: 28px;\r\n padding: 40px;\r\n box-shadow: 0 12px 60px rgba(26, 42, 74, 0.10);\r\n margin-top: 32px;\r\n border: 1px solid rgba(26, 42, 74, 0.04);\r\n }\r\n\r\n \/* ---- LEFT: IMAGES ---- *\/\r\n .detail-images .main-image {\r\n background: #f4f6f9;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n aspect-ratio: 4\/3;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n border: 1px solid #e8edf4;\r\n }\r\n\r\n .detail-images .main-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .detail-images .main-image .placeholder-img {\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(135deg, #e8edf4, #d5dde8);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 80px;\r\n color: #8a9bb5;\r\n }\r\n\r\n .detail-images .thumbnails {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 12px;\r\n }\r\n\r\n .detail-images .thumbnails .thumb {\r\n aspect-ratio: 1\/1;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n background: #f4f6f9;\r\n border: 2px solid #e8edf4;\r\n cursor: pointer;\r\n transition: border-color 0.3s ease, transform 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .detail-images .thumbnails .thumb:hover {\r\n border-color: #1a4a7a;\r\n transform: scale(1.03);\r\n }\r\n\r\n .detail-images .thumbnails .thumb.active {\r\n border-color: #1a4a7a;\r\n box-shadow: 0 0 0 4px rgba(26, 74, 122, 0.15);\r\n }\r\n\r\n .detail-images .thumbnails .thumb img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .detail-images .thumbnails .thumb .thumb-placeholder {\r\n width: 100%;\r\n height: 100%;\r\n background: #e8edf4;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: #8a9bb5;\r\n }\r\n\r\n \/* ---- RIGHT: INFO ---- *\/\r\n .detail-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .detail-info .badge-row {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .detail-info .badge-row .badge {\r\n padding: 4px 16px;\r\n border-radius: 40px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .detail-info .badge-row .badge-manufacturer {\r\n background: #0b1a3a;\r\n color: #ffffff;\r\n }\r\n\r\n .detail-info .badge-row .badge-category {\r\n background: #e8edf4;\r\n color: #1a2a4a;\r\n }\r\n\r\n .detail-info .badge-row .badge-segment {\r\n background: #1a4a7a;\r\n color: #ffffff;\r\n }\r\n\r\n .detail-info .product-title {\r\n font-size: 34px;\r\n font-weight: 700;\r\n color: #0b1a3a;\r\n letter-spacing: -0.5px;\r\n line-height: 1.2;\r\n }\r\n\r\n .detail-info .product-subtitle {\r\n font-size: 16px;\r\n color: #4a5f7e;\r\n font-weight: 400;\r\n }\r\n\r\n .detail-info .product-description {\r\n font-size: 15px;\r\n color: #2a3f5e;\r\n line-height: 1.8;\r\n margin: 4px 0 8px 0;\r\n font-weight: 300;\r\n }\r\n\r\n .detail-info .details-box {\r\n background: #f8faff;\r\n border-radius: 16px;\r\n padding: 20px 24px;\r\n border: 1px solid #e8edf4;\r\n margin: 8px 0 12px 0;\r\n }\r\n\r\n .detail-info .details-box .detail-row {\r\n display: flex;\r\n padding: 6px 0;\r\n font-size: 14px;\r\n border-bottom: 1px solid rgba(232, 237, 244, 0.6);\r\n }\r\n\r\n .detail-info .details-box .detail-row:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .detail-info .details-box .detail-label {\r\n font-weight: 600;\r\n color: #0b1a3a;\r\n width: 130px;\r\n flex-shrink: 0;\r\n font-size: 13px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n .detail-info .details-box .detail-value {\r\n color: #1a2a4a;\r\n font-weight: 400;\r\n }\r\n\r\n .detail-info .action-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 16px;\r\n margin-top: 8px;\r\n }\r\n\r\n .detail-info .action-row .qty-selector {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: #f4f6f9;\r\n border-radius: 12px;\r\n padding: 4px 8px;\r\n border: 1px solid #e8edf4;\r\n }\r\n\r\n .detail-info .action-row .qty-selector button {\r\n width: 36px;\r\n height: 36px;\r\n border: none;\r\n background: transparent;\r\n font-size: 18px;\r\n cursor: pointer;\r\n color: #1a2a4a;\r\n border-radius: 8px;\r\n transition: background 0.2s ease;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n .detail-info .action-row .qty-selector button:hover {\r\n background: #e8edf4;\r\n }\r\n\r\n .detail-info .action-row .qty-selector span {\r\n font-weight: 600;\r\n font-size: 16px;\r\n min-width: 32px;\r\n text-align: center;\r\n color: #0b1a3a;\r\n }\r\n\r\n .detail-info .action-row .btn {\r\n padding: 14px 32px;\r\n border: none;\r\n border-radius: 14px;\r\n font-family: 'Poppins', sans-serif;\r\n font-weight: 600;\r\n font-size: 14px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n text-decoration: none;\r\n }\r\n\r\n .detail-info .action-row .btn-primary {\r\n background: #0b1a3a;\r\n color: #ffffff;\r\n box-shadow: 0 4px 16px rgba(11, 26, 58, 0.25);\r\n }\r\n\r\n .detail-info .action-row .btn-primary:hover {\r\n background: #1a3a6a;\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 28px rgba(11, 26, 58, 0.35);\r\n }\r\n\r\n .detail-info .action-row .btn-secondary {\r\n background: #e8edf4;\r\n color: #0b1a3a;\r\n }\r\n\r\n .detail-info .action-row .btn-secondary:hover {\r\n background: #d5dde8;\r\n transform: translateY(-2px);\r\n }\r\n\r\n .detail-info .back-row {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 12px;\r\n margin-top: 4px;\r\n }\r\n\r\n .detail-info .back-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: #4a5f7e;\r\n transition: color 0.2s ease, gap 0.3s ease;\r\n text-decoration: none;\r\n cursor: pointer;\r\n }\r\n\r\n .detail-info .back-link:hover {\r\n color: #0b1a3a;\r\n gap: 14px;\r\n }\r\n\r\n .detail-info .back-link i {\r\n font-size: 13px;\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n @media (max-width: 1024px) {\r\n .catalog-layout {\r\n grid-template-columns: 240px 1fr;\r\n gap: 24px;\r\n }\r\n\r\n .detail-wrapper {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 32px;\r\n padding: 32px;\r\n }\r\n\r\n .segment-card .card-title {\r\n font-size: 28px;\r\n }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .catalog-layout {\r\n grid-template-columns: 1fr;\r\n gap: 24px;\r\n }\r\n\r\n .catalog-sidebar {\r\n position: relative;\r\n top: 0;\r\n }\r\n\r\n .detail-wrapper {\r\n grid-template-columns: 1fr;\r\n gap: 28px;\r\n padding: 24px;\r\n }\r\n\r\n .segments-grid {\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .segment-card {\r\n min-height: 280px;\r\n padding: 28px 24px;\r\n }\r\n\r\n .segment-card .card-title {\r\n font-size: 24px;\r\n }\r\n\r\n .detail-info .product-title {\r\n font-size: 28px;\r\n }\r\n\r\n .detail-images .thumbnails {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n\r\n .catalog-header h2 {\r\n font-size: 22px;\r\n }\r\n }\r\n\r\n @media (max-width: 600px) {\r\n .segments-grid {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n\r\n .segment-card {\r\n min-height: 220px;\r\n padding: 20px 20px;\r\n }\r\n\r\n .segment-card .card-title {\r\n font-size: 22px;\r\n }\r\n\r\n .segment-card .card-desc {\r\n font-size: 14px;\r\n max-width: 100%;\r\n }\r\n\r\n .segment-card .card-icon {\r\n font-size: 32px;\r\n }\r\n\r\n .catalog-products .list-header h2 {\r\n font-size: 20px;\r\n }\r\n\r\n .product-category-card {\r\n padding: 18px 18px;\r\n }\r\n\r\n .detail-wrapper {\r\n padding: 16px;\r\n border-radius: 18px;\r\n }\r\n\r\n .detail-info .product-title {\r\n font-size: 24px;\r\n }\r\n\r\n .detail-info .details-box .detail-row {\r\n flex-direction: column;\r\n padding: 8px 0;\r\n }\r\n\r\n .detail-info .details-box .detail-label {\r\n width: 100%;\r\n font-size: 12px;\r\n }\r\n\r\n .detail-info .action-row .btn {\r\n padding: 12px 20px;\r\n font-size: 13px;\r\n flex: 1 1 auto;\r\n }\r\n\r\n .detail-info .action-row {\r\n gap: 12px;\r\n }\r\n\r\n .detail-images .thumbnails {\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 8px;\r\n }\r\n\r\n .container {\r\n padding: 0 16px;\r\n }\r\n\r\n .section-padding {\r\n padding: 40px 0;\r\n }\r\n\r\n .catalog-sidebar {\r\n padding: 20px 16px;\r\n }\r\n\r\n .catalog-header h2 {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n @media (max-width: 400px) {\r\n .detail-info .action-row .btn {\r\n font-size: 12px;\r\n padding: 10px 14px;\r\n }\r\n\r\n .detail-info .action-row .qty-selector button {\r\n width: 30px;\r\n height: 30px;\r\n font-size: 15px;\r\n }\r\n\r\n .product-category-card .product-item {\r\n font-size: 13px;\r\n }\r\n\r\n .segment-card .card-title {\r\n font-size: 20px;\r\n }\r\n }\r\n\r\n \/* ============================================================\r\n MISC \u2014 placeholder\r\n ============================================================ *\/\r\n .img-placeholder {\r\n background: linear-gradient(135deg, #e8edf4, #d5dde8);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #8a9bb5;\r\n font-size: 48px;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .detail-images .main-image .img-placeholder {\r\n font-size: 64px;\r\n }\r\n\r\n \/* segment indicator in catalog *\/\r\n .segment-indicator {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: #ffffff;\r\n background: #0b1a3a;\r\n padding: 4px 20px;\r\n border-radius: 40px;\r\n }\r\n\r\n .segment-indicator i {\r\n font-size: 14px;\r\n }\r\n\r\n \/* hide\/show via js *\/\r\n .hidden {\r\n display: none !important;\r\n }\r\n\r\n \/* loader \/ transition *\/\r\n .fade-in {\r\n animation: fadeIn 0.4s ease forwards;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(12px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section id=\"home\" class=\"page-section active-section section-padding\">\r\n <div class=\"container\">\r\n <div style=\"text-align:center; margin-bottom:12px;\">\r\n <span style=\"font-size:14px; font-weight:600; color:#1a4a7a; letter-spacing:2px; text-transform:uppercase;\">MARINE EQUIPMENT<\/span>\r\n <h1 style=\"font-size:38px; font-weight:800; color:#0b1a3a; letter-spacing:-1px; margin-top:4px;\">Reliable Solutions for Modern Maritime Operations<\/h1>\r\n <p style=\"font-size:16px; color:#4a5f7e; max-width:560px; margin:8px auto 0; font-weight:300;\">Premium navigation, communication, and advanced marine equipment designed to support safe, efficient, and reliable vessel operations..<\/p>\r\n <\/div>\r\n\r\n <div class=\"segments-grid\">\r\n \r\n <div class=\"segment-card nav-card\" data-segment=\"navigation\">\r\n <div class=\"card-bg\"><\/div>\r\n <div class=\"overlay\"><\/div>\r\n <div class=\"card-content\">\r\n <div class=\"card-top\">\r\n <span class=\"card-icon\"><i class=\"fas fa-compass\"><\/i><\/span>\r\n <span class=\"badge-count\" id=\"nav-count\">0 Products<\/span>\r\n <\/div>\r\n <h3 class=\"card-title\">Navigation<\/h3>\r\n <p class=\"card-desc\">Gyrocompasses, FOGs, Radar Systems, ECDIS, Autopilots, AIS and other marine navigation equipment.<\/p>\r\n <span class=\"card-arrow\">Explore <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"segment-card comm-card\" data-segment=\"communication\">\r\n <div class=\"card-bg\"><\/div>\r\n <div class=\"overlay\"><\/div>\r\n <div class=\"card-content\">\r\n <div class=\"card-top\">\r\n <span class=\"card-icon\"><i class=\"fas fa-satellite-dish\"><\/i><\/span>\r\n <span class=\"badge-count\" id=\"comm-count\">0 Products<\/span>\r\n <\/div>\r\n <h3 class=\"card-title\">Communication<\/h3>\r\n <p class=\"card-desc\">GMDSS equipment, VHF\/UHF radios, satellite communication and other marine communication equipment.<\/p>\r\n <span class=\"card-arrow\">Explore <i class=\"fas fa-arrow-right\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"catalog\" class=\"page-section section-padding\">\r\n <div class=\"container\">\r\n <div class=\"catalog-header\">\r\n <h2>\r\n <i class=\"fas fa-th-list\"><\/i>\r\n <span id=\"catalog-title\">Product Catalog<\/span>\r\n <span class=\"segment-indicator\" id=\"catalog-segment-badge\">\r\n <i class=\"fas fa-compass\"><\/i> Navigation\r\n <\/span>\r\n <\/h2>\r\n <a href=\"#home\" class=\"back-home\" id=\"back-to-home\"><i class=\"fas fa-arrow-left\"><\/i> Back to Segments<\/a>\r\n <\/div>\r\n\r\n <div class=\"catalog-layout\">\r\n \r\n <aside class=\"catalog-sidebar\">\r\n <div class=\"sidebar-title\"><i class=\"fas fa-sliders-h\"><\/i> Filter<\/div>\r\n\r\n <div class=\"search-box\">\r\n <i class=\"fas fa-search search-icon\"><\/i>\r\n <input type=\"text\" id=\"search-input\" placeholder=\"Search products...\" aria-label=\"Search products\" \/>\r\n <\/div>\r\n\r\n <div class=\"filter-group\">\r\n <label>Category<\/label>\r\n <div id=\"category-filter-list\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n <hr class=\"filter-divider\" \/>\r\n\r\n <div class=\"filter-group\">\r\n <label>Manufacturer<\/label>\r\n <div id=\"manufacturer-filter-list\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/aside>\r\n\r\n \r\n <div class=\"catalog-products\">\r\n <div class=\"list-header\">\r\n <span class=\"count-badge\" id=\"product-count\">0 products<\/span>\r\n <\/div>\r\n\r\n <div class=\"product-grid\" id=\"product-grid\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"detail\" class=\"page-section section-padding\">\r\n <div class=\"container\">\r\n <div style=\"margin-bottom:16px;\">\r\n <a href=\"#catalog\" class=\"back-link\" id=\"back-to-catalog\" style=\"display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#4a5f7e; text-decoration:none; cursor:pointer;\">\r\n <i class=\"fas fa-arrow-left\"><\/i> Back to Products\r\n <\/a>\r\n <\/div>\r\n <div class=\"detail-wrapper\" id=\"detail-wrapper\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n \/\/ ================================================================\r\n \/\/ PRODUCT DATA \u2014 Add your products here.\r\n \/\/ Structure:\r\n \/\/ id: unique number\r\n \/\/ segment: 'navigation' or 'communication'\r\n \/\/ category: string (e.g. 'Radar', 'GMDSS')\r\n \/\/ manufacturer: string (e.g. 'Sperry Marine', 'Furuno')\r\n \/\/ name: product name\r\n \/\/ model: model number\r\n \/\/ description: full description\r\n \/\/ image: URL or placeholder\r\n \/\/ thumbnails: array of URL strings (up to 4)\r\n \/\/ productType: string (e.g. 'X Band Radar')\r\n \/\/ ================================================================\r\n const products = [{\r\n id: 1,\r\n segment: 'navigation',\r\n category: 'Integrated Bridge Systems',\r\n manufacturer: 'Sperry Marine',\r\n name: 'TabletBridge',\r\n model: 'TabletBridge',\r\n description: 'TabletBridge is a state-of-the-art integrated bridge system that combines navigation, communication, and automation into a single intuitive interface. Designed for modern vessels requiring seamless integration and enhanced situational awareness.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Integrated Navigation System'\r\n }, {\r\n id: 2,\r\n segment: 'navigation',\r\n category: 'Integrated Bridge Systems',\r\n manufacturer: 'Sperry Marine',\r\n name: 'VisionMaster Net',\r\n model: 'VMN-100',\r\n description: 'VisionMaster Net is a comprehensive navigation suite that delivers advanced radar, ECDIS, and conning capabilities in a unified network. Built for commercial vessels demanding high-performance navigation with full redundancy and scalability.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Integrated Navigation Suite'\r\n }, {\r\n id: 3,\r\n segment: 'navigation',\r\n category: 'Radar',\r\n manufacturer: 'Sperry Marine',\r\n name: 'VisionMaster Net Radar X Band',\r\n model: 'VMN-RX',\r\n description: 'The VisionMaster Net Radar X Band delivers high-definition target detection with exceptional range and resolution. Engineered for the most demanding maritime environments, it provides reliable navigation and collision avoidance in all weather conditions.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'X Band Radar'\r\n }, {\r\n id: 4,\r\n segment: 'navigation',\r\n category: 'Radar',\r\n manufacturer: 'Sperry Marine',\r\n name: 'VisionMaster Net Radar S Band',\r\n model: 'VMN-RS',\r\n description: 'The VisionMaster Net Radar S Band provides superior long-range detection and tracking in adverse weather. Its solid-state design ensures reliability and low maintenance for commercial vessel operations.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'S Band Radar'\r\n }, {\r\n id: 5,\r\n segment: 'navigation',\r\n category: 'Radar',\r\n manufacturer: 'Sperry Marine',\r\n name: 'VisionMaster Net Radar',\r\n model: 'VMN-R',\r\n description: 'The VisionMaster Net Radar is a versatile radar solution offering excellent target detection and tracking for a wide range of vessel types. It integrates seamlessly with the VisionMaster Net suite.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine Radar'\r\n }, {\r\n id: 6,\r\n segment: 'navigation',\r\n category: 'Radar',\r\n manufacturer: 'Navico',\r\n name: 'Simrad ARGUS X band & S Band',\r\n model: 'ARGUS-XS',\r\n description: 'The Simrad ARGUS radar system combines X and S band capabilities in a single integrated solution. With advanced signal processing and solid-state technology, ARGUS delivers unparalleled target detection and tracking for commercial and naval vessels.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Dual-Band Radar System'\r\n }, {\r\n id: 7,\r\n segment: 'navigation',\r\n category: 'Radar',\r\n manufacturer: 'Navico',\r\n name: 'Simrad HALO',\r\n model: 'HALO-24',\r\n description: 'The Simrad HALO is a pulse compression radar that delivers exceptional target detection and clarity. Its advanced technology provides superior short-range and long-range performance for commercial fishing and recreational vessels.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Pulse Compression Radar'\r\n }, {\r\n id: 8,\r\n segment: 'navigation',\r\n category: 'Radar',\r\n manufacturer: 'Navico',\r\n name: 'Simrad R5000',\r\n model: 'R5000',\r\n description: 'The Simrad R5000 is a high-performance open-array radar system designed for commercial vessels. It offers exceptional range, target resolution, and reliability in the harshest marine conditions.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Open-Array Radar'\r\n }, {\r\n id: 9,\r\n segment: 'navigation',\r\n category: 'ECDIS',\r\n manufacturer: 'Sperry Marine',\r\n name: 'VisionMaster Net ECDIS',\r\n model: 'VMN-ECDIS',\r\n description: 'The VisionMaster Net ECDIS is a fully compliant electronic chart display and information system that integrates seamlessly with the VisionMaster Net suite. It provides advanced chart display, route planning, and navigation monitoring.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'ECDIS System'\r\n }, {\r\n id: 10,\r\n segment: 'navigation',\r\n category: 'ECDIS',\r\n manufacturer: 'Intermarine Electronics',\r\n name: 'ECDIS Navigator G2',\r\n model: 'G2-ECDIS',\r\n description: 'The ECDIS Navigator G2 is a next-generation electronic chart display and information system designed for commercial shipping. Featuring a high-resolution display, intuitive interface, and full compliance with IMO performance standards.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'ECDIS System'\r\n }, {\r\n id: 11,\r\n segment: 'navigation',\r\n category: 'ECDIS',\r\n manufacturer: 'Simrad',\r\n name: 'ECDIS900 MK5\/15',\r\n model: 'ECDIS900',\r\n description: 'The ECDIS900 MK5\/15 is a professional electronic chart system offering advanced navigation capabilities with dual-display support. It delivers precise chart plotting, route management, and real-time vessel tracking.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'ECDIS System'\r\n }, {\r\n id: 12,\r\n segment: 'navigation',\r\n category: 'Autopilots',\r\n manufacturer: 'Sperry Marine',\r\n name: 'NAVIPILOT 4500N',\r\n model: '4500N',\r\n description: 'The NAVIPILOT 4500N is a high-performance marine autopilot system offering precise course keeping and advanced steering control. Designed for vessels of all sizes, it features adaptive technology that adjusts to sea conditions automatically.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine Autopilot System'\r\n }, {\r\n id: 13,\r\n segment: 'navigation',\r\n category: 'Autopilots',\r\n manufacturer: 'Navico',\r\n name: 'Simrad AP70 & AP80',\r\n model: 'AP70\/80',\r\n description: 'The Simrad AP70 and AP80 are advanced autopilot systems that deliver precise steering control and course keeping. They feature intuitive interfaces and integrate seamlessly with Simrad navigation systems.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine Autopilot System'\r\n }, {\r\n id: 14,\r\n segment: 'navigation',\r\n category: 'AIS',\r\n manufacturer: 'Furuno',\r\n name: 'FA-170 AIS',\r\n model: 'FA-170',\r\n description: 'The FA-170 is a Class A Automatic Identification System (AIS) that provides real-time vessel tracking and collision avoidance. It integrates seamlessly with existing navigation systems and meets all IMO carriage requirements.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Class A AIS Transponder'\r\n }, {\r\n id: 15,\r\n segment: 'navigation',\r\n category: 'AIS',\r\n manufacturer: 'Furuno',\r\n name: 'FA-150 AIS',\r\n model: 'FA-150',\r\n description: 'The FA-150 is a compact Class A AIS transponder offering reliable vessel tracking and collision avoidance. It is designed for easy installation and integration with existing navigation systems.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Class A AIS Transponder'\r\n }, {\r\n id: 16,\r\n segment: 'navigation',\r\n category: 'Gyrocompasses',\r\n manufacturer: 'Sperry Marine',\r\n name: 'NAVIGAT 3500',\r\n model: '3500',\r\n description: 'The NAVIGAT 3500 is a fiber optic gyrocompass that provides accurate heading information for all types of vessels. With its solid-state design, it offers exceptional reliability, low maintenance, and rapid start-up in all sea conditions.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Fiber Optic Gyrocompass'\r\n }, {\r\n id: 17,\r\n segment: 'navigation',\r\n category: 'Gyrocompasses',\r\n manufacturer: 'Sperry Marine',\r\n name: 'NAVIGAT 2500',\r\n model: '2500',\r\n description: 'The NAVIGAT 2500 is a reliable and accurate gyrocompass designed for vessels requiring precise heading information. Its compact design and low power consumption make it ideal for a wide range of marine applications.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Gyrocompass'\r\n }, {\r\n id: 18,\r\n segment: 'communication',\r\n category: 'GMDSS',\r\n manufacturer: 'Furuno',\r\n name: 'FS-1575 GMDSS',\r\n model: 'FS-1575',\r\n description: 'The FS-1575 is a fully compliant GMDSS radio station that provides reliable communication for vessels operating in all sea areas. It features DSC capabilities, built-in watchkeeping, and a rugged design suitable for the marine environment.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'GMDSS Radio Station'\r\n }, {\r\n id: 19,\r\n segment: 'communication',\r\n category: 'GMDSS',\r\n manufacturer: 'Furuno',\r\n name: 'FS-2575 GMDSS',\r\n model: 'FS-2575',\r\n description: 'The FS-2575 is a high-power GMDSS radio station offering extended range and reliable communication for vessels operating in remote ocean areas. It features advanced DSC and watchkeeping capabilities.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'GMDSS Radio Station'\r\n }, {\r\n id: 20,\r\n segment: 'communication',\r\n category: 'VHF\/UHF Radios',\r\n manufacturer: 'Sailor',\r\n name: 'Sailor 6222 VHF',\r\n model: '6222',\r\n description: 'The Sailor 6222 VHF is a professional maritime VHF radio with DSC and built-in AIS receiver. It delivers crystal-clear audio and reliable communication, meeting the demands of commercial shipping and offshore operations.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine VHF Radio with DSC'\r\n }, {\r\n id: 21,\r\n segment: 'communication',\r\n category: 'VHF\/UHF Radios',\r\n manufacturer: 'Sailor',\r\n name: 'Sailor 6270 VHF',\r\n model: '6270',\r\n description: 'The Sailor 6270 VHF is a compact and powerful marine VHF radio featuring a large color display and advanced DSC capabilities. It is designed for both commercial and recreational vessels.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine VHF Radio'\r\n }, {\r\n id: 22,\r\n segment: 'communication',\r\n category: 'VHF\/UHF Radios',\r\n manufacturer: 'Icom',\r\n name: 'Icom IC-M605',\r\n model: 'IC-M605',\r\n description: 'The Icom IC-M605 is a compact and powerful marine VHF radio featuring a large color display, Class D DSC, and advanced noise cancellation. Ideal for both recreational and commercial vessels.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine VHF Radio'\r\n }, {\r\n id: 23,\r\n segment: 'communication',\r\n category: 'VHF\/UHF Radios',\r\n manufacturer: 'Icom',\r\n name: 'Icom IC-M423',\r\n model: 'IC-M423',\r\n description: 'The Icom IC-M423 is a versatile marine VHF radio with built-in AIS receiver and GPS. It delivers clear communication and reliable performance for a wide range of marine applications.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Marine VHF Radio with AIS'\r\n }, {\r\n id: 24,\r\n segment: 'communication',\r\n category: 'Satellite Communication',\r\n manufacturer: 'JRC',\r\n name: 'JRC JUE-501',\r\n model: 'JUE-501',\r\n description: 'The JRC JUE-501 is an Inmarsat FleetBroadband terminal providing high-speed satellite communication for voice and data. It enables global connectivity, crew welfare, and operational efficiency for vessels of all types.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Inmarsat FleetBroadband Terminal'\r\n }, {\r\n id: 25,\r\n segment: 'communication',\r\n category: 'Satellite Communication',\r\n manufacturer: 'JRC',\r\n name: 'JRC JUE-401',\r\n model: 'JUE-401',\r\n description: 'The JRC JUE-401 is a compact satellite communication terminal offering reliable voice and data connectivity for vessels operating in remote areas. It features easy installation and low power consumption.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'Satellite Communication Terminal'\r\n }, {\r\n id: 26,\r\n segment: 'communication',\r\n category: 'MF\/HF Radios',\r\n manufacturer: 'Sailor',\r\n name: 'Sailor 6310 MF\/HF',\r\n model: '6310',\r\n description: 'The Sailor 6310 is a high-performance MF\/HF radio station with DSC and ALE capabilities. It provides reliable long-range communication for vessels operating in remote ocean areas, with a rugged design built for the marine environment.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'MF\/HF Radio Station'\r\n }, {\r\n id: 27,\r\n segment: 'communication',\r\n category: 'MF\/HF Radios',\r\n manufacturer: 'Sailor',\r\n name: 'Sailor 6320 MF\/HF',\r\n model: '6320',\r\n description: 'The Sailor 6320 is a versatile MF\/HF radio station offering reliable long-range communication with advanced DSC and ALE features. Its compact design and robust construction make it ideal for commercial vessels.',\r\n image: '',\r\n thumbnails: ['', '', '', ''],\r\n productType: 'MF\/HF Radio Station'\r\n }];\r\n\r\n \/\/ ================================================================\r\n \/\/ STATE\r\n \/\/ ================================================================\r\n let currentSegment = 'navigation';\r\n let currentProductId = null;\r\n let filteredProducts = [];\r\n\r\n \/\/ ================================================================\r\n \/\/ DOM REFS\r\n \/\/ ================================================================\r\n const homeSection = document.getElementById('home');\r\n const catalogSection = document.getElementById('catalog');\r\n const detailSection = document.getElementById('detail');\r\n const productGrid = document.getElementById('product-grid');\r\n const catalogTitle = document.getElementById('catalog-title');\r\n const catalogSegmentBadge = document.getElementById('catalog-segment-badge');\r\n const productCount = document.getElementById('product-count');\r\n const searchInput = document.getElementById('search-input');\r\n const categoryFilterList = document.getElementById('category-filter-list');\r\n const manufacturerFilterList = document.getElementById('manufacturer-filter-list');\r\n const detailWrapper = document.getElementById('detail-wrapper');\r\n const navCount = document.getElementById('nav-count');\r\n const commCount = document.getElementById('comm-count');\r\n\r\n \/\/ ================================================================\r\n \/\/ HELPERS\r\n \/\/ ================================================================\r\n function getSegmentLabel(segment) {\r\n return segment === 'navigation' ? 'Navigation' : 'Communication';\r\n }\r\n\r\n function getSegmentIcon(segment) {\r\n return segment === 'navigation' ? 'fa-compass' : 'fa-satellite-dish';\r\n }\r\n\r\n function getSegmentBadgeHTML(segment) {\r\n const label = getSegmentLabel(segment);\r\n const icon = getSegmentIcon(segment);\r\n return `<i class=\"fas ${icon}\"><\/i> ${label}`;\r\n }\r\n\r\n function getProductCount(segment) {\r\n return products.filter(p => p.segment === segment).length;\r\n }\r\n\r\n function getCategories(segment) {\r\n const cats = new Set();\r\n products.filter(p => p.segment === segment).forEach(p => cats.add(p.category));\r\n return Array.from(cats).sort();\r\n }\r\n\r\n function getManufacturers(segment) {\r\n const mans = new Set();\r\n products.filter(p => p.segment === segment).forEach(p => mans.add(p.manufacturer));\r\n return Array.from(mans).sort();\r\n }\r\n\r\n function getFilteredProducts(segment, searchTerm, categoryFilter, manufacturerFilter) {\r\n let result = products.filter(p => p.segment === segment);\r\n\r\n if (searchTerm && searchTerm.trim() !== '') {\r\n const term = searchTerm.trim().toLowerCase();\r\n result = result.filter(p =>\r\n p.name.toLowerCase().includes(term) ||\r\n p.manufacturer.toLowerCase().includes(term) ||\r\n p.category.toLowerCase().includes(term) ||\r\n p.model.toLowerCase().includes(term)\r\n );\r\n }\r\n\r\n if (categoryFilter && categoryFilter !== 'all') {\r\n result = result.filter(p => p.category === categoryFilter);\r\n }\r\n\r\n if (manufacturerFilter && manufacturerFilter !== 'all') {\r\n result = result.filter(p => p.manufacturer === manufacturerFilter);\r\n }\r\n\r\n return result;\r\n }\r\n\r\n function groupProductsByCategory(productsList) {\r\n const groups = {};\r\n productsList.forEach(p => {\r\n if (!groups[p.category]) groups[p.category] = {};\r\n if (!groups[p.category][p.manufacturer]) groups[p.category][p.manufacturer] = [];\r\n groups[p.category][p.manufacturer].push(p);\r\n });\r\n return groups;\r\n }\r\n\r\n \/\/ ================================================================\r\n \/\/ RENDER: Catalog\r\n \/\/ ================================================================\r\n function renderCatalog() {\r\n const searchTerm = searchInput.value;\r\n \/\/ get active filters from the DOM\r\n const activeCategory = document.querySelector('.filter-item.category-filter.active')?.dataset\r\n .category || 'all';\r\n const activeManufacturer = document.querySelector('.filter-item.manufacturer-filter.active')?.dataset\r\n .manufacturer || 'all';\r\n\r\n filteredProducts = getFilteredProducts(currentSegment, searchTerm, activeCategory, activeManufacturer);\r\n\r\n \/\/ update count\r\n productCount.textContent = `${filteredProducts.length} product${filteredProducts.length !== 1 ? 's' : ''}`;\r\n\r\n if (filteredProducts.length === 0) {\r\n productGrid.innerHTML = `\r\n <div class=\"empty-state\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <h3>No products found<\/h3>\r\n <p>Try adjusting your search or filter criteria.<\/p>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n\r\n const groups = groupProductsByCategory(filteredProducts);\r\n let html = '';\r\n\r\n \/\/ sort categories alphabetically\r\n const sortedCategories = Object.keys(groups).sort();\r\n\r\n sortedCategories.forEach(category => {\r\n const manufacturers = groups[category];\r\n const sortedManufacturers = Object.keys(manufacturers).sort();\r\n\r\n \/\/ For each manufacturer, create a card\r\n sortedManufacturers.forEach(manufacturer => {\r\n const items = manufacturers[manufacturer];\r\n html += `\r\n <div class=\"product-category-card\">\r\n <div class=\"cat-header\">${category}<\/div>\r\n <div class=\"manufacturer-row\"><i class=\"fas fa-building\"><\/i> ${manufacturer}<\/div>\r\n `;\r\n\r\n items.forEach(p => {\r\n html += `\r\n <div class=\"product-item\">\r\n <a class=\"product-link\" data-id=\"${p.id}\">\r\n <span class=\"bullet\">\u25b8<\/span> ${p.name}\r\n <i class=\"fas fa-arrow-right\"><\/i>\r\n <\/a>\r\n <\/div>\r\n `;\r\n });\r\n\r\n html += `<\/div>`;\r\n });\r\n });\r\n\r\n productGrid.innerHTML = html;\r\n\r\n \/\/ attach click events to product links\r\n document.querySelectorAll('.product-link[data-id]').forEach(el => {\r\n el.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const id = parseInt(this.dataset.id);\r\n openDetail(id);\r\n });\r\n });\r\n }\r\n\r\n \/\/ ================================================================\r\n \/\/ RENDER: Sidebar filters\r\n \/\/ ================================================================\r\n function renderFilters() {\r\n \/\/ Categories\r\n const categories = getCategories(currentSegment);\r\n let catHtml = `\r\n <div class=\"filter-item category-filter active\" data-category=\"all\">\r\n <i class=\"fas fa-caret-right\"><\/i> All Categories\r\n <\/div>\r\n `;\r\n categories.forEach(cat => {\r\n const count = products.filter(p => p.segment === currentSegment && p.category === cat).length;\r\n catHtml += `\r\n <div class=\"filter-item category-filter\" data-category=\"${cat}\">\r\n <i class=\"fas fa-caret-right\"><\/i> ${cat}\r\n <span class=\"count\">${count}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n categoryFilterList.innerHTML = catHtml;\r\n\r\n \/\/ Manufacturers\r\n const manufacturers = getManufacturers(currentSegment);\r\n let manHtml = `\r\n <div class=\"filter-item manufacturer-filter active\" data-manufacturer=\"all\">\r\n <i class=\"fas fa-caret-right\"><\/i> All Manufacturers\r\n <\/div>\r\n `;\r\n manufacturers.forEach(man => {\r\n const count = products.filter(p => p.segment === currentSegment && p.manufacturer === man).length;\r\n manHtml += `\r\n <div class=\"filter-item manufacturer-filter\" data-manufacturer=\"${man}\">\r\n <i class=\"fas fa-caret-right\"><\/i> ${man}\r\n <span class=\"count\">${count}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n manufacturerFilterList.innerHTML = manHtml;\r\n\r\n \/\/ attach filter events\r\n document.querySelectorAll('.category-filter').forEach(el => {\r\n el.addEventListener('click', function() {\r\n document.querySelectorAll('.category-filter').forEach(f => f.classList.remove('active'));\r\n this.classList.add('active');\r\n renderCatalog();\r\n });\r\n });\r\n\r\n document.querySelectorAll('.manufacturer-filter').forEach(el => {\r\n el.addEventListener('click', function() {\r\n document.querySelectorAll('.manufacturer-filter').forEach(f => f.classList.remove(\r\n 'active'));\r\n this.classList.add('active');\r\n renderCatalog();\r\n });\r\n });\r\n }\r\n\r\n \/\/ ================================================================\r\n \/\/ RENDER: Detail\r\n \/\/ ================================================================\r\n function renderDetail(product) {\r\n if (!product) {\r\n detailWrapper.innerHTML = `<div class=\"empty-state\"><h3>Product not found<\/h3><\/div>`;\r\n return;\r\n }\r\n\r\n const segmentLabel = getSegmentLabel(product.segment);\r\n const segmentIcon = getSegmentIcon(product.segment);\r\n\r\n \/\/ build thumbnails\r\n let thumbsHtml = '';\r\n const thumbs = product.thumbnails || ['', '', '', ''];\r\n thumbs.forEach((t, idx) => {\r\n if (t && t.trim() !== '') {\r\n thumbsHtml += `\r\n <div class=\"thumb ${idx === 0 ? 'active' : ''}\">\r\n <img decoding=\"async\" src=\"${t}\" alt=\"Thumbnail ${idx+1}\" \/>\r\n <\/div>\r\n `;\r\n } else {\r\n thumbsHtml += `\r\n <div class=\"thumb ${idx === 0 ? 'active' : ''}\">\r\n <div class=\"thumb-placeholder\"><i class=\"fas fa-image\"><\/i><\/div>\r\n <\/div>\r\n `;\r\n }\r\n });\r\n\r\n \/\/ main image\r\n let mainImageHtml = '';\r\n if (product.image && product.image.trim() !== '') {\r\n mainImageHtml = `<img decoding=\"async\" src=\"${product.image}\" alt=\"${product.name}\" \/>`;\r\n } else {\r\n mainImageHtml = `\r\n <div class=\"placeholder-img\">\r\n <i class=\"fas fa-ship\" style=\"font-size:72px; color:#8a9bb5;\"><\/i>\r\n <\/div>\r\n `;\r\n }\r\n\r\n detailWrapper.innerHTML = `\r\n \r\n <div class=\"detail-images\">\r\n <div class=\"main-image\">\r\n ${mainImageHtml}\r\n <\/div>\r\n <div class=\"thumbnails\">\r\n ${thumbsHtml}\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"detail-info\">\r\n <div class=\"badge-row\">\r\n <span class=\"badge badge-manufacturer\">${product.manufacturer}<\/span>\r\n <span class=\"badge badge-segment\"><i class=\"fas ${segmentIcon}\"><\/i> ${segmentLabel}<\/span>\r\n <span class=\"badge badge-category\">${product.category}<\/span>\r\n <\/div>\r\n <h1 class=\"product-title\">${product.name}<\/h1>\r\n <div class=\"product-subtitle\">${product.category}<\/div>\r\n <p class=\"product-description\">${product.description || 'Product description goes here.'}<\/p>\r\n\r\n <div class=\"details-box\">\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Manufacturer<\/span>\r\n <span class=\"detail-value\">${product.manufacturer}<\/span>\r\n <\/div>\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Category<\/span>\r\n <span class=\"detail-value\">${product.category}<\/span>\r\n <\/div>\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Sub-Category<\/span>\r\n <span class=\"detail-value\">${product.category}<\/span>\r\n <\/div>\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Model<\/span>\r\n <span class=\"detail-value\">${product.model || '\u2014'}<\/span>\r\n <\/div>\r\n <div class=\"detail-row\">\r\n <span class=\"detail-label\">Product Type<\/span>\r\n <span class=\"detail-value\">${product.productType || '\u2014'}<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"action-row\">\r\n <div class=\"qty-selector\">\r\n <button type=\"button\" aria-label=\"Decrease quantity\" class=\"qty-btn\">\u2212<\/button>\r\n <span class=\"qty-value\">1<\/span>\r\n <button type=\"button\" aria-label=\"Increase quantity\" class=\"qty-btn\">+<\/button>\r\n <\/div>\r\n <a href=\"#\" class=\"btn btn-primary\"><i class=\"fas fa-shopping-cart\"><\/i> Add to Cart<\/a>\r\n <a href=\"#\" class=\"btn btn-secondary\"><i class=\"fas fa-envelope\"><\/i> Enquire Now<\/a>\r\n <\/div>\r\n\r\n <div class=\"back-row\">\r\n <a class=\"back-link\" id=\"detail-back-to-catalog\"><i class=\"fas fa-arrow-left\"><\/i> Back to Products<\/a>\r\n <a href=\"#home\" class=\"back-link\"><i class=\"fas fa-home\"><\/i> Home<\/a>\r\n <\/div>\r\n <\/div>\r\n `;\r\n\r\n \/\/ quantity buttons\r\n detailWrapper.querySelectorAll('.qty-btn').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n const span = this.closest('.qty-selector').querySelector('.qty-value');\r\n let val = parseInt(span.textContent);\r\n if (this.textContent === '\u2212') {\r\n if (val > 1) val--;\r\n } else {\r\n val++;\r\n }\r\n span.textContent = val;\r\n });\r\n });\r\n\r\n \/\/ back to catalog\r\n detailWrapper.querySelector('#detail-back-to-catalog').addEventListener('click', function(e) {\r\n e.preventDefault();\r\n openCatalog(currentSegment);\r\n });\r\n\r\n \/\/ thumbnail click: set active\r\n detailWrapper.querySelectorAll('.thumb').forEach((thumb, idx) => {\r\n thumb.addEventListener('click', function() {\r\n detailWrapper.querySelectorAll('.thumb').forEach(t => t.classList.remove('active'));\r\n this.classList.add('active');\r\n \/\/ update main image (if we had real images)\r\n \/\/ For now, just visual feedback\r\n });\r\n });\r\n }\r\n\r\n \/\/ ================================================================\r\n \/\/ NAVIGATION\r\n \/\/ ================================================================\r\n function showSection(sectionId) {\r\n document.querySelectorAll('.page-section').forEach(el => el.classList.remove('active-section'));\r\n const section = document.getElementById(sectionId);\r\n if (section) {\r\n section.classList.add('active-section');\r\n \/\/ remove hash to keep things clean\r\n if (window.history && window.history.pushState) {\r\n window.history.pushState({}, '', '#' + sectionId);\r\n }\r\n }\r\n }\r\n\r\n function openCatalog(segment) {\r\n currentSegment = segment;\r\n const label = getSegmentLabel(segment);\r\n const icon = getSegmentIcon(segment);\r\n\r\n catalogTitle.textContent = 'Product Catalog';\r\n catalogSegmentBadge.innerHTML = `<i class=\"fas ${icon}\"><\/i> ${label}`;\r\n\r\n \/\/ update counts on home cards\r\n navCount.textContent = `${getProductCount('navigation')} Products`;\r\n commCount.textContent = `${getProductCount('communication')} Products`;\r\n\r\n \/\/ reset search and filters\r\n searchInput.value = '';\r\n\r\n renderFilters();\r\n renderCatalog();\r\n\r\n showSection('catalog');\r\n \/\/ scroll to top of catalog\r\n catalogSection.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n\r\n function openDetail(productId) {\r\n const product = products.find(p => p.id === productId);\r\n if (!product) return;\r\n currentProductId = productId;\r\n renderDetail(product);\r\n showSection('detail');\r\n detailSection.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n\r\n \/\/ ================================================================\r\n \/\/ EVENT BINDING\r\n \/\/ ================================================================\r\n\r\n \/\/ Segment cards\r\n document.querySelectorAll('.segment-card').forEach(card => {\r\n card.addEventListener('click', function() {\r\n const segment = this.dataset.segment;\r\n if (segment) {\r\n openCatalog(segment);\r\n }\r\n });\r\n });\r\n\r\n \/\/ Search input with debounce\r\n let searchTimeout;\r\n searchInput.addEventListener('input', function() {\r\n clearTimeout(searchTimeout);\r\n searchTimeout = setTimeout(() => {\r\n renderCatalog();\r\n }, 300);\r\n });\r\n\r\n \/\/ Back to home from catalog\r\n document.getElementById('back-to-home').addEventListener('click', function(e) {\r\n e.preventDefault();\r\n showSection('home');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n });\r\n\r\n \/\/ Back to catalog from detail\r\n document.getElementById('back-to-catalog').addEventListener('click', function(e) {\r\n e.preventDefault();\r\n openCatalog(currentSegment);\r\n });\r\n\r\n \/\/ ================================================================\r\n \/\/ INIT\r\n \/\/ ================================================================\r\n\r\n \/\/ Update counts on home\r\n navCount.textContent = `${getProductCount('navigation')} Products`;\r\n commCount.textContent = `${getProductCount('communication')} Products`;\r\n\r\n \/\/ If there's a hash on load, handle it\r\n window.addEventListener('hashchange', function() {\r\n const hash = window.location.hash;\r\n if (hash === '#home' || hash === '' || hash === '#') {\r\n showSection('home');\r\n } else if (hash === '#catalog') {\r\n \/\/ if we have a segment stored, use it\r\n if (currentSegment) {\r\n showSection('catalog');\r\n } else {\r\n openCatalog('navigation');\r\n }\r\n } else if (hash === '#detail') {\r\n if (currentProductId) {\r\n showSection('detail');\r\n } else {\r\n \/\/ fallback: go to catalog\r\n openCatalog(currentSegment || 'navigation');\r\n }\r\n }\r\n });\r\n\r\n \/\/ Initial: if no hash, show home\r\n if (!window.location.hash || window.location.hash === '#') {\r\n showSection('home');\r\n } else {\r\n const hash = window.location.hash;\r\n if (hash === '#catalog') {\r\n openCatalog('navigation');\r\n } else if (hash === '#detail') {\r\n \/\/ try to find a product id from the hash\r\n const match = hash.match(\/detail-(\\d+)\/);\r\n if (match) {\r\n const id = parseInt(match[1]);\r\n const product = products.find(p => p.id === id);\r\n if (product) {\r\n currentSegment = product.segment;\r\n openDetail(id);\r\n } else {\r\n openCatalog('navigation');\r\n }\r\n } else {\r\n openCatalog('navigation');\r\n }\r\n } else {\r\n showSection('home');\r\n }\r\n }\r\n\r\n console.log('\u2705 Marine Equipment Catalog loaded.');\r\n console.log(`\ud83d\udce6 ${products.length} products available.`);\r\n console.log('\ud83d\udd04 To add products, edit the \"products\" array in the JavaScript section.');\r\n console.log('\ud83d\uddbc\ufe0f Replace image URLs, names, descriptions, etc. as needed.');\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Marine Product’s & Equipment Trusted Marine Equipment, Leading Brands & Reliable Solutions forEvery Vessel. Premium […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-475","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/pages\/475","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":70,"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/pages\/475\/revisions"}],"predecessor-version":[{"id":750,"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/pages\/475\/revisions\/750"}],"wp:attachment":[{"href":"https:\/\/amcommarine.com\/index.php\/wp-json\/wp\/v2\/media?parent=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}