{"id":286509,"date":"2025-08-25T11:44:46","date_gmt":"2025-08-25T11:44:46","guid":{"rendered":"https:\/\/www.yatco.com\/?page_id=286509"},"modified":"2025-09-02T11:17:51","modified_gmt":"2025-09-02T11:17:51","slug":"yachts-for-sale","status":"publish","type":"page","link":"https:\/\/www.yatco.com\/yachts-for-sale\/","title":{"rendered":"Yachts For Sale"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"286509\" class=\"elementor elementor-286509\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d85ecb e-con-full e-flex e-con e-parent\" data-id=\"7d85ecb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-1b971ee e-con-full e-flex e-con e-child\" data-id=\"1b971ee\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-2a89c57 e-con-full e-flex e-con e-child\" data-id=\"2a89c57\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83e86b6 elementor-widget elementor-widget-shortcode\" data-id=\"83e86b6\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">        <div class=\"yatco-dynamic-header\">\n        <h1 id=\"dynamic-h1\">\n            Yachts for sale        <\/h1>\n\n            <div id=\"dynamic-banner-text\" class=\"banner-description\">\n                browse yachts for sale on yatco. filter by price, year, length, and more to find your perfect vessel.            <\/div>\n        <\/div>\n        \n        <script>\n        \/\/ Make SEO data available to JavaScript\n        window.yatcoInitialSEOData = {\"title\":\"Yachts for Sale | YATCO\",\"description\":\"Search for yachts for sale by price, year, length, and more on YATCO, the most comprehensive search engine in the industry.\",\"h1\":\"Yachts for Sale\",\"banner\":\"Browse yachts for sale on YATCO. Filter by price, year, length, and more to find your perfect vessel.\"};\n        \n        \/\/ Update meta tags immediately if we're on the search page\n        if (window.location.pathname.includes('\/yachts-for-sale')) {\n            document.addEventListener('DOMContentLoaded', function() {\n                \/\/ Update document title\n                document.title = \"Yachts for Sale | YATCO\";\n                \n                \/\/ Update meta description\n                const metaDesc = document.querySelector('meta[name=\"description\"]');\n                if (metaDesc) {\n                    metaDesc.setAttribute('content', \"Search for yachts for sale by price, year, length, and more on YATCO, the most comprehensive search engine in the industry.\");\n                }\n                \n                \/\/ Update OG tags\n                const ogTitle = document.querySelector('meta[property=\"og:title\"]');\n                if (ogTitle) {\n                    ogTitle.setAttribute('content', \"Yachts for Sale | YATCO\");\n                }\n                \n                const ogDesc = document.querySelector('meta[property=\"og:description\"]');\n                if (ogDesc) {\n                    ogDesc.setAttribute('content', \"Search for yachts for sale by price, year, length, and more on YATCO, the most comprehensive search engine in the industry.\");\n                }\n            });\n        }\n        <\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e7932dd e-con-full e-flex e-con e-parent\" data-id=\"e7932dd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e0c6014 elementor-widget elementor-widget-shortcode\" data-id=\"e0c6014\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<!-- Load Tailwind CSS for new design -->\n\n\n<!-- Additional CSS overrides for the new design -->\n<style>\n    .ais-Hits-item, .ais-InfiniteHits-item {\n        align-items: center;\n        background: none !important;\n        box-shadow: none !important;\n        display: flex;\n        font-size: .875rem;\n        font-weight: 400;\n        line-height: 1.25rem;\n        padding: 0 !important;\n    }\n    mark, ins {\n  background: #257aee !important;\n  text-decoration: none;\n}\n#vessel-type .ais-RefinementList-labelText[data-vessel-icon=\"motor\"]::before {\n    background-image: url('https:\/\/www.yatco.com\/wp-content\/plugins\/new_design_yatco-connect-insiders-addon\/assets\/img\/motor-blue.svg');\n    background-position: 50% 30%;\n    filter: grayscale(100%);\n    background-size: 130px;\n}\n\n\/* Motor vessel icons - blue when selected *\/\n#vessel-type .ais-RefinementList-item--selected .ais-RefinementList-labelText[data-vessel-icon=\"motor\"]::before {\n    background-image: url('https:\/\/www.yatco.com\/wp-content\/plugins\/new_design_yatco-connect-insiders-addon\/assets\/img\/motor-blue.svg');\n    background-position: 50% 30%;\n    filter:none;\n    background-size: 130px;\n}\n\n\/* Sailing vessel icons - gray by default *\/\n#vessel-type .ais-RefinementList-labelText[data-vessel-icon=\"sail\"]::before {\n    background-image: url('https:\/\/www.yatco.com\/wp-content\/plugins\/new_design_yatco-connect-insiders-addon\/assets\/img\/sail-blue.svg');\n    filter: grayscale(100%);\n    background-position: 50% 23%;\n    background-size: 130px;\n}\n\n\/* Sailing vessel icons - blue when selected *\/\n#vessel-type .ais-RefinementList-item--selected .ais-RefinementList-labelText[data-vessel-icon=\"sail\"]::before {\n    background-image: url('https:\/\/www.yatco.com\/wp-content\/plugins\/new_design_yatco-connect-insiders-addon\/assets\/img\/sail-blue.svg');\n    background-position: 50% 30%;\n    filter:none;\n    background-size: 130px;\n}\n.togglearrow {\n    width: 15px;\n    height: 9px;\n    transition: transform 0.2s ease;\n    background-image: url('https:\/\/www.yatco.com\/wp-content\/plugins\/new_design_yatco-connect-insiders-addon\/assets\/img\/arrow-toggle.svg');\n    background-repeat: no-repeat;\n}\n    \/* ==============================\n       FAQ simple styles (no icons)\n       ============================== *\/\n    .dynamic-filter-description h3 {\n        font-size: 18px;\n        line-height: 1.4;\n        margin: 14px 0 6px;\n        color: #0f172a;\n        font-weight: 600;\n    }\n\n    .dynamic-filter-description h2 + h3 {\n        margin-top: 10px;\n    }\n\n    .dynamic-filter-description h3 + p {\n        margin: 0 0 14px;\n    }\n\n    \/* Keep links readable inside answers *\/\n    .dynamic-filter-description p a {\n        color: #0369a1;\n        text-underline-offset: 2px;\n    }\n\n    \/* ==============================\n       FAQ separated items (simple)\n       ============================== *\/\n    .dynamic-filter-description .faq-item-simple {\n        border-bottom: 1px solid #e5e7eb;\n        border-radius: 8px;\n        background: #ffffff;\n        padding: 12px 14px;\n        margin: 10px 0;\n    }\n\n    .dynamic-filter-description .faq-item-simple h3 {\n        font-size: 18px;\n        line-height: 1.4;\n        margin: 0 0 8px;\n        color: #0f172a;\n        font-weight: 600;\n    }\n\n    .dynamic-filter-description .faq-item-simple p {\n        margin: 0;\n    }\n\n    .dynamic-filter-description .faq-item-simple p a {\n        color: #0369a1;\n        text-decoration: underline;\n        text-underline-offset: 2px;\n    }\n\n\n<\/style>\n\n\n<!-- Main Container with responsive padding -->\n<div class=\"yatco-search-app max-w-full mx-auto p-2 sm:p-4 lg:p-6\">\n        \n    <!-- Search Layout: Sidebar + Results with Tailwind Grid -->\n    <div class=\"yatco-search-layout grid grid-cols-1 lg:grid-cols-[320px_1fr] gap-6\">\n        \n        <!-- SECTION 1: FILTERS SIDEBAR with Tailwind styling -->\n        <aside class=\"yatco-filters-container w-full lg:w-[320px]\">\n            <!-- Mobile Filter Toggle -->\n            <button class=\"filter-toggle-btn lg:hidden flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors mb-6\" id=\"filter-toggle\">\n                <i class=\"fas fa-filter\"><\/i>\n                <span>Filters<\/span>\n            <\/button>\n\n            <!-- Applied Filters Section - Small div above search form -->\n            <div id=\"applied-filters-container\" class=\"sticky top-2 z-10 bg-white rounded-lg border border-blue-200 p-2 sm:p-3 mb-4 shadow-lg hidden\">\n                <div class=\"flex justify-between items-center mb-2\">\n                    <h4 class=\"text-sm font-medium text-blue-800\">Selected Filters<\/h4>\n                    <button type=\"button\" id=\"clear-all-filters\" class=\"px-2 py-1 bg-red-500 text-white rounded text-xs hover:bg-red-600 transition-colors duration-200\">Clear All<\/button>\n                <\/div>\n                <div id=\"applied-filters-display\" class=\"flex flex-wrap gap-1\">\n                    <!-- Filter tags will be populated here -->\n                <\/div>\n            <\/div>\n\n            <!-- Filter Groups with Tailwind styling -->\n            <div class=\"filters-sidebar bg-white rounded-lg shadow-lg p-4 sm:p-5 lg:p-6 h-fit\" id=\"filters-sidebar\">\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Search<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle search filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"searchbox\"><\/div>\n                        <div id=\"query-suggestions\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Type<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle type filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"vessel-type\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Category<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle category filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"main-category\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Length<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle length filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <!-- Length Unit Toggle Buttons -->\n                        \n                        <!-- Hidden select for compatibility with existing dropdown sync -->\n                        <select id=\"length-unit-selector-sidebar\" class=\"responsive-dropdown\">\n                            <option value=\"feet\">Feet<\/option>\n                            <option value=\"meters\">Meters<\/option>\n                        <\/select>\n                        \n                        <div id=\"length-range\" class=\"range-input\"><\/div>\n                        <div id=\"length-range-meters\" class=\"range-input\" style=\"display: none;\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Price<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle price filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                    <select id=\"currency-selector-sidebar\"  class=\"responsive-dropdown\">\n                        <option value=\"USD\">$ USD<\/option>\n                        <option value=\"EUR\">\u20ac EUR<\/option>\n                        <option value=\"GBP\">\u00a3 GBP<\/option>\n                        <option value=\"AUD\">$ AUD<\/option>\n                        <option value=\"CAD\">$ CAD<\/option>\n                        <option value=\"CHF\">CHF<\/option>\n                        <option value=\"HKD\">$ HKD<\/option>\n                        <option value=\"AED\">$ AED<\/option>\n                        <option value=\"SEK\">kr SEK<\/option>\n                        <option value=\"NZD\">$ NZD<\/option>\n                    <\/select>\n                        <!-- Price Range Containers for each currency -->\n                        <div id=\"price-range-usd\" class=\"range-input\" style=\"display: block;\"><\/div>\n                        <div id=\"price-range-eur\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-gbp\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-aud\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-cad\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-chf\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-hkd\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-aed\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-sek\" class=\"range-input\" style=\"display: none;\"><\/div>\n                        <div id=\"price-range-nzd\" class=\"range-input\" style=\"display: none;\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Condition<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle condition filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"vessel-condition\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Year<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle year filter\">\n                        <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <!-- Quick Year Buttons\n                        <div id=\"year-range-buttons\" class=\"year-buttons mb-4\"><\/div> -->\n                        \n                        <!-- Year Range Input -->\n                        <div id=\"year-range\" class=\"range-input\"><\/div>\n                        \n\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Brand<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle brand filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"builder-list\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Model<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle model filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"model-list\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n               \n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Sub Category<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle category filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"sub-category\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Region<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle region filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"location-region\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Country<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle country filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"location-country\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\" id=location-state-label>\n                    <div class=\"filter-header\">\n                        <span>State<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle state filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"location-state\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>City<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle city filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"location-city\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                  \n\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Hull Material<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle hull material filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"hull-material\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"filter-group\">\n                    <div class=\"filter-header\">\n                        <span>Staterooms<\/span>\n                        <button class=\"collapse-btn\" aria-label=\"Toggle staterooms filter\">\n                           <div class=\"togglearrow\"><\/div>\n                        <\/button>\n                    <\/div>\n                    <div class=\"filter-content\">\n                        <div id=\"staterooms\" class=\"refinement-list\"><\/div>\n                    <\/div>\n                <\/div>\n\n                \n\n              \n\n                <!-- Days on Market Filter -->\n                <div class=\"filter-group\">\n                <div class=\"filter-header\">\n                    <span>Days on Market<\/span>\n                    <button class=\"collapse-btn\" aria-label=\"Toggle days on market filter\">\n                        <div class=\"togglearrow\"><\/div>\n                    <\/button>\n                <\/div>\n                <div class=\"filter-content\">\n                    <div id=\"days-on-market\"><\/div>\n                <\/div>\n            <\/div>\n                <div class=\"filters-mobile-actions lg:hidden\">\n                    <button type=\"button\" id=\"mobile-reset-filters\">Reset<\/button>\n                    <button type=\"button\" id=\"mobile-view-results\">View Search<\/button>\n                <\/div>\n        <\/aside>\n\n        <!-- SECTION 2: RESULTS with Tailwind styling -->\n        <div class=\"yatco-results-container w-full bg-white rounded-lg shadow-lg p-3 sm:p-4 lg:p-6\">\n            <div class=\"results-header flex flex-col lg:flex-row lg:justify-between lg:items-center mb-6 pb-4 border-b border-gray-200 gap-4\">\n                <div id=\"stats\" class=\"text-gray-600 text-sm lg:text-base\"><\/div>\n                <div class=\"header-controls flex flex-col sm:flex-row sm:items-center gap-3 w-full lg:w-auto\">\n                    <select id=\"currency-selector-header\" class=\"responsive-dropdown px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-auto\">\n                        <option value=\"USD\">$ USD<\/option>\n                        <option value=\"EUR\">\u20ac EUR<\/option>\n                        <option value=\"GBP\">\u00a3 GBP<\/option>\n                        <option value=\"AUD\">$ AUD<\/option>\n                        <option value=\"CAD\">$ CAD<\/option>\n                        <option value=\"CHF\">CHF<\/option>\n                        <option value=\"HKD\">$ HKD<\/option>\n                        <option value=\"AED\">$ AED<\/option>\n                        <option value=\"SEK\">kr SEK<\/option>\n                        <option value=\"NZD\">$ NZD<\/option>\n                    <\/select>\n                    <select id=\"length-unit-selector-header\" class=\"responsive-dropdown px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-full sm:w-auto\">\n                        <option value=\"feet\">Feet<\/option>\n                        <option value=\"meters\">Meters<\/option>\n                    <\/select>\n                    <div id=\"event-name\" class=\"w-full sm:w-auto\"><\/div>\n                    <div id=\"sort-by\" class=\"w-full sm:w-auto\"><\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Results Grid Container with Tailwind Grid -->\n            <div class=\"yatco-results-grid-wrapper\">\n                <div id=\"hits\" class=\"hits-grid w-full\">\n                    <!-- Skeleton Loading Grid (matches InstantSearch design) -->\n                    <div class=\"skeleton-yacht-listings hits-grid\" style=\"display: grid;\">\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                            <div class=\"w-full p-1 col-yacht skeleton-card\">\n                            <div class=\"bg-white rounded-lg shadow-lg overflow-hidden\">\n                                <div class=\"block relative group\">\n                                    <div class=\"relative\">\n                                        <!-- Skeleton image -->\n                                        <div class=\"skeleton-image w-full h-64 bg-gray-200\"><\/div>\n                                        <div class=\"absolute bottom-2 right-2 flex space-x-2 p-2\">\n                                            <span class=\"skeleton-badge bg-gray-300 text-transparent text-xs px-2 py-1 rounded\">Year Builder Length<\/span>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"p-4\">\n                                    <div class=\"block\">\n                                        <div class=\"skeleton-category h-3 bg-gray-200 rounded mb-2\" style=\"width: 60%;\"><\/div>\n                                        <div class=\"skeleton-price h-6 bg-gray-200 rounded mb-2\" style=\"width: 40%;\"><\/div>\n                                        <div class=\"skeleton-title h-5 bg-gray-200 rounded mb-2\" style=\"width: 80%;\"><\/div>\n                                    <\/div>\n                                    <div class=\"skeleton-location h-4 bg-gray-200 rounded mb-2\" style=\"width: 70%;\"><\/div>\n                                    \n                                    <!-- Skeleton specs row -->\n                                    <div class=\"flex items-center text-gray-700 mb-2 space-x-2\">\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 20px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 30px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 40px;\"><\/div>\n                                        <\/div>\n                                        <div class=\"flex items-center space-x-1 min-w-0\">\n                                            <div class=\"skeleton-icon size-5 bg-gray-200 rounded\"><\/div>\n                                            <div class=\"skeleton-spec h-3 bg-gray-200 rounded\" style=\"width: 50px;\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    \n                                    <hr class=\"!my-3 !border-gray-300\">\n                                    \n                                    <!-- Skeleton footer buttons -->\n                                    <div class=\"flex justify-between items-center mt-2 btnRow space-x-2\">\n                                        <div class=\"skeleton-button h-10 bg-gray-200 rounded-lg\" style=\"width: 80px;\"><\/div>\n                                        <div class=\"skeleton-button h-8 bg-gray-200 rounded\" style=\"width: 100px;\"><\/div>\n                                        <div class=\"skeleton-broker w-14 h-14 bg-gray-200 rounded-full\"><\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n            \n            <!-- Centered Pagination Container -->\n            <div class=\"pagination-wrapper\">\n            <div id=\"pagination\"><\/div>\n            <\/div>\n            \n                    <div id=\"dynamic-filter-description\" class=\"dynamic-filter-description-container\">\n                            <div class=\"description-loading\" style=\"display: none;\">\n                    <p>Loading description...<\/p>\n                <\/div>\n            \n                            <div class='dynamic-filter-description default-description'>\n        <h2>Explore the World of Yachts for Sale<\/h2>\n        <p>Exploring the world of yachts for sale opens the door to luxury, freedom, and endless adventures at sea. Whether you are searching for <a href='https:\/\/www.yatco.com\/yachts-for-sale\/condition-new\/' target='_blank' rel='noopener'>new yachts for sale<\/a>, browsing <a href='https:\/\/www.yatco.com\/yachts-for-sale\/condition-used\/' target='_blank' rel='noopener'>used yachts for sale<\/a>, or comparing yacht prices, today\u2019s market offers an extraordinary range of options to suit every lifestyle. From sleek <a href='https:\/\/www.yatco.com\/yachts-for-sale\/type-motor\/' target='_blank' rel='noopener'>motor yachts for sale<\/a> designed for speed and comfort, to timeless <a href='https:\/\/www.yatco.com\/yachts-for-sale\/type-sailing\/' target='_blank' rel='noopener'>sailing yachts for sale<\/a> built for elegance and performance, <a href='https:\/\/www.yatco.com\/yacht-ownership\/' target='_blank' rel='noopener'>yacht ownership<\/a> has never been more accessible.<\/p>\n        \n        <h2>Luxury Yachts, Superyachts & Megayachts<\/h2>\n        <p>For those drawn to the highest tier of luxury, our curated selection of <a href='https:\/\/www.yatco.com\/yachts-for-sale\/subcategory-superyacht\/' target='_blank' rel='noopener'>superyachts for sale<\/a> and <a href='https:\/\/www.yatco.com\/yachts-for-sale\/subcategory-mega\/' target='_blank' rel='noopener'>megayachts for sale<\/a> represents the pinnacle of <a href='https:\/\/www.yatco.com\/introduction-to-yacht-design\/' target='_blank' rel='noopener' >design<\/a> and innovation. These vessels often feature state-of-the-art amenities, expansive <a href='https:\/\/www.yatco.com\/yacht-decks\/' target='_blank' rel='noopener'>decks<\/a>, and world-class interiors, attracting discerning buyers seeking super expensive yachts that redefine opulence. With many private yacht price options available, professional <a href='https:\/\/www.yatco.com\/yacht-brokers-near-me\/' target='_blank' rel='noopener'>yacht brokers<\/a> can guide you through the purchasing process to ensure transparency and confidence in your <a href='https:\/\/www.yatco.com\/yacht-investment\/' target='_blank' rel='noopener'>investment<\/a>.<\/p>\n        \n        <h2>Leading Yacht Brands<\/h2>\n        <p>Brands such as <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-azimut\/' target='_blank' rel='noopener'>Azimut yachts<\/a> and <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-viking\/' target='_blank' rel='noopener'>Viking yachts<\/a> continue to set benchmarks in performance and craftsmanship, offering both cutting-edge technology and timeless design. Buyers interested in luxury yachts for sale will also find exclusive opportunities through luxury yacht sales specialists who understand the nuances of the global market. From contemporary <a href='https:\/\/www.yatco.com\/yachts-for-sale\/subcategory-expedition-or-explorer\/' target='_blank' rel='noopener'>explorer yachts<\/a> ready for long-range cruising to iconic builds that stand as floating works of art, every purchase is a chance to own more than a vessel\u2014it\u2019s an entry into a lifestyle.<\/p>\n        \n        <h2>Yacht Prices and Market Demand<\/h2>\n        <p>As demand grows for both new yachts for sale and pre-owned vessels, staying informed about current yacht prices and available listings is essential. Whether your goal is a <a href='https:\/\/www.yatco.com\/family-cruisers\/' target='_blank' rel='noopener'>family cruiser<\/a>, a statement-making flagship, or a classic sailing yacht, our marketplace connects you with the most reputable yacht brokers worldwide. Start your journey today by exploring our collection of luxury yachts for sale, finding the perfect yacht and letting your dream of ownership become a reality on the open seas.<\/p>\n        \n        <h2>Frequently Asked Questions<\/h2>\n        \n        <div class='faq-item-simple'>\n        <h3>What\u2019s the difference between a superyacht and a megayacht?<\/h3>\n        <p>While often used interchangeably, a superyacht typically refers to yachts over 79 feet, while megayachts are even larger, often exceeding 200 feet. Both categories emphasize luxury, advanced design, and bespoke amenities, but megayachts tend to be ultra-customized and rare.<\/p>\n        <\/div>\n        \n        <div class='faq-item-simple'>\n        <h3>How much does a new motor yacht cost?<\/h3>\n        <p>Prices for <a href='https:\/\/www.yatco.com\/yachts-for-sale\/condition-new\/type-motor\/' target='_blank' rel='noopener'>new motor yachts<\/a> vary widely depending on <a href='https:\/\/www.yatco.com\/yacht-sizes\/' target='_blank' rel='noopener'>size<\/a>, brand, and features. Smaller models may start around $500,000 to $1 million, while luxury motor yachts from builders like Azimut Yachts or Viking often range from several million to well over $20 million.<\/p>\n        <\/div>\n        \n        <div class='faq-item-simple'>\n        <h3>Can I finance a yacht purchase?<\/h3>\n        <p>Yes, yacht financing is available through specialized lenders and banks that work closely with yacht brokers and buyers. Terms will depend on the yacht\u2019s value, age, and your financial profile. Financing makes it easier to manage large investments while enjoying ownership sooner.<\/p>\n        <\/div>\n        \n        <div class='faq-item-simple'>\n        <h3>What are the most popular yacht brands?<\/h3>\n        <p>Some of the most sought-after names include Azimut Yachts, <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-benetti\/' target='_blank' rel='noopener'>Benetti<\/a>, <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-feadship\/' target='_blank' rel='noopener'>Feadship<\/a>, <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-ferretti\/' target='_blank' rel='noopener'>Ferretti<\/a>, <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-heesen\/' target='_blank' rel='noopener'>Heesen<\/a>, <a href='https:\/\/www.yatco.com\/yachts-for-sale\/brand-sunseeker\/' target='_blank' rel='noopener'>Sunseeker<\/a>, and Viking Yachts. These brands are known for quality craftsmanship, performance, and resale value, making them strong choices for buyers entering the luxury yacht sales market.<\/p>\n        <\/div>\n        <\/div>                    <\/div>\n\n        <style>\n            .dynamic-filter-description {\n                background: #f8f9fa;\n                padding: 30px;\n                margin: 30px 0;\n                border-radius: 8px;\n\n            }\n\n            .dynamic-filter-description h2 {\n                color: #0369a1;\n                font-size: 28px;\n                margin-bottom: 20px;\n                font-weight: 600;\n            }\n\n            .dynamic-filter-description p {\n                line-height: 1.7;\n                margin-bottom: 15px;\n                color: #374151;\n            }\n\n            .dynamic-filter-description strong {\n                color: #0369a1;\n                font-weight: 600;\n            }\n\n            .description-loading {\n                text-align: center;\n                padding: 20px;\n                color: #6b7280;\n            }\n\n            @media (max-width: 768px) {\n                .dynamic-filter-description {\n                    padding: 20px;\n                    margin: 20px 0;\n                }\n\n                .dynamic-filter-description h2 {\n                    font-size: 24px;\n                }\n            }\n        <\/style>\n\n        <script>\n            document.addEventListener('DOMContentLoaded', function() {\n                \/\/ Update dynamic description when search results change\n                if (typeof window.yatcoUpdateDynamicDescription === 'undefined') {\n                    window.yatcoUpdateDynamicDescription = function(searchResults, activeFacets) {\n                        const container = document.getElementById('dynamic-filter-description');\n                        if (!container) {\n                            console.error('YATCO Dynamic Description: Container not found!');\n                            return;\n                        }\n\n                        \/\/ Show loading\n                        const loading = container.querySelector('.description-loading');\n                        if (loading) loading.style.display = 'block';\n\n                        \/\/ Prepare facet filters for server\n                        const facetFilters = [];\n                        Object.entries(activeFacets).forEach(([attribute, values]) => {\n                            if (Array.isArray(values)) {\n                                values.forEach(value => {\n                                    facetFilters.push(`${attribute}:${value}`);\n                                });\n                            } else if (values) {\n                                facetFilters.push(`${attribute}:${values}`);\n                            }\n                        });\n\n                        \/\/ Only show description for single facet type with single value\n                        const facetTypes = Object.keys(activeFacets).filter(key =>\n                            activeFacets[key] && activeFacets[key].length > 0\n                        );\n                        \/\/ Detect numeric range refinements (length\/price\/year\/days)\n                        const getNR = () => (searchResults && (searchResults.state && searchResults.state.numericRefinements) || (searchResults._state && searchResults._state.numericRefinements)) || {};\n                        const hasAnyRangeRef = (() => {\n                            const nr = getNR();\n                            const hasOps = ops => (ops && ((Array.isArray(ops['>=']) && ops['>='].length) || (Array.isArray(ops['<=']) && ops['<='].length) || (Array.isArray(ops['=']) && ops['='].length)));\n                            if (hasOps(nr['LOAFeet']) || hasOps(nr['Year']) || hasOps(nr['DaysOnMarket'])) return true;\n                            \/\/ Any currency price field\n                            return Object.keys(nr).some(k => \/^Price\/.test(k) && hasOps(nr[k]));\n                        })();\n\n                        if (facetTypes.length === 0) {\n                            \/\/ No facets: only show default when there are no numeric ranges either\n                            if (hasAnyRangeRef) {\n                                if (loading) loading.style.display = 'none';\n                                container.innerHTML = '';\n                                return;\n                            }\n                            const formData = new FormData();\n                            formData.append('action', 'yatco_get_dynamic_description');\n                            formData.append('nonce', yatcoConfig.nonce || 'no-nonce');\n                            fetch(yatcoConfig.ajaxUrl, {\n                                method: 'POST',\n                                body: formData,\n                                credentials: 'same-origin'\n                            })\n                                .then(r => r.json())\n                                .then(data => {\n                                    if (loading) loading.style.display = 'none';\n                                    if (data.success && data.data && data.data.description) {\n                                        container.innerHTML = data.data.description;\n                                    } else {\n                                        container.innerHTML = '';\n                                    }\n                                })\n                                .catch(() => {\n                                    if (loading) loading.style.display = 'none';\n                                    container.innerHTML = '';\n                                });\n                            return;\n                        }\n                        \/\/ Special-case: allow only country+state pair (each single value) OR single facet\n                        const isCountryStatePair = (\n                            facetTypes.length === 2 &&\n                            facetTypes.includes('LocationCountry') &&\n                            facetTypes.includes('LocationState') &&\n                            Array.isArray(activeFacets.LocationCountry) && activeFacets.LocationCountry.length === 1 &&\n                            Array.isArray(activeFacets.LocationState) && activeFacets.LocationState.length === 1\n                        );\n                        if (!isCountryStatePair && facetTypes.length !== 1) {\n                            container.innerHTML = '';\n                            return;\n                        }\n\n                        \/\/ If single facet, ensure only one value\n                        let singleFacetType = null;\n                        if (!isCountryStatePair) {\n                            singleFacetType = facetTypes[0];\n                            const facetValues = activeFacets[singleFacetType];\n                            if (facetValues.length > 1) {\n                                container.innerHTML = '';\n                                return;\n                            }\n                        }\n\n                        const supportedFacetTypes = ['BuilderName', 'VesselTypeText', 'LocationRegion', 'LocationCountry', 'LocationState', 'LocationCity'];\n                        if (!isCountryStatePair) {\n                            if (!supportedFacetTypes.includes(singleFacetType) || hasAnyRangeRef) {\n                                if (loading) loading.style.display = 'none';\n                                container.innerHTML = '';\n                                return;\n                            }\n                        } else if (hasAnyRangeRef) {\n                            if (loading) loading.style.display = 'none';\n                            container.innerHTML = '';\n                            return;\n                        }\n\n                        \/\/ Get specific facet count for the active facet\n                        let countToUse = searchResults && (searchResults.nbHits || 0);\n                        if (!isCountryStatePair) {\n                            const singleFacetValue = activeFacets[singleFacetType][0];\n                            let specificFacetCount = 0;\n                            \/\/ Try to get the specific count for this facet value\n                            if (searchResults.getFacetValues && typeof searchResults.getFacetValues === 'function') {\n                                try {\n                                    const facetValues = searchResults.getFacetValues(singleFacetType);\n                                    if (facetValues && Array.isArray(facetValues)) {\n                                        const matchingFacet = facetValues.find(f => f.name === singleFacetValue);\n                                        if (matchingFacet) {\n                                            specificFacetCount = matchingFacet.count;\n                                        }\n                                    }\n                                } catch (e) {\n                                    console.log('YATCO Dynamic Description: Could not get specific facet count, using total results');\n                                }\n                            }\n                            \/\/ Fallback to total results if we couldn't get specific count\n                            countToUse = specificFacetCount > 0 ? specificFacetCount : (searchResults.nbHits || 0);\n                        }\n                        \/\/ Make AJAX request to get description\n                        const formData = new FormData();\n                        formData.append('action', 'yatco_get_dynamic_description');\n                        formData.append('nonce', yatcoConfig.nonce || 'no-nonce');\n                        formData.append('totalResults', countToUse);\n\n                        \/\/ Add facet filters as array\n                        facetFilters.forEach(filter => {\n                            formData.append('facetFilters[]', filter);\n                        });\n\n                        fetch(yatcoConfig.ajaxUrl, {\n                            method: 'POST',\n                            body: formData,\n                            credentials: 'same-origin'\n                        })\n                            .then(response => {\n                                \/\/ console.log('YATCO 'Dynamic Description: Response' status:', response.status);\n                                return response.json();\n                            })\n                            .then(data => {\n                                if (loading) loading.style.display = 'none';\n\n                                if (data.success && data.data.description) {\n                                    \/\/ Check if we already have the same type of description and just need to update the count\n                                    const existingDescription = container.querySelector('.dynamic-filter-description');\n\n                                    \/\/ Determine target class by facet type so we know whether to replace or just update count\n                                    const targetTypeClass = (function() {\n                                        if (isCountryStatePair) return 'state-description';\n                                        if (singleFacetType === 'LocationCity') return 'city-description';\n                                        if ([ 'LocationRegion', 'LocationCountry', 'LocationState' ].includes(singleFacetType)) return 'location-description';\n                                        if (singleFacetType === 'BuilderName') return 'builder-description';\n                                        if (singleFacetType === 'VesselTypeText') return 'type-description';\n                                        return 'default-description';\n                                    })();\n\n                                    const mustReplace = !existingDescription || existingDescription.classList.contains('default-description') || !existingDescription.classList.contains(targetTypeClass);\n\n                                    if (mustReplace) {\n                                        container.innerHTML = data.data.description;\n                                    } else if (countToUse > 0) {\n                                        \/\/ Update the count in existing content by finding and replacing count numbers\n                                        const strongElements = existingDescription.querySelectorAll('strong');\n                                        strongElements.forEach(el => {\n                                            const text = el.textContent;\n                                            if (text.match(\/\\d+\\s+(yachts?|vessels?)\/i)) {\n                                                const afterNumber = text.replace(\/^\\d+\\s+\/, '');\n                                                el.textContent = `${countToUse} ${afterNumber}`;\n                                            }\n                                        });\n                                    } else {\n                                        container.innerHTML = data.data.description;\n                                    }\n                                } else {\n                                    console.log('YATCO Dynamic Description: No description or error:', data);\n                                    \/\/ For any active facet without supported dynamic description, clear container to avoid default duplication\n                                    container.innerHTML = '';\n                                }\n                            })\n                            .catch(error => {\n                                console.error('YATCO Dynamic Description: AJAX error:', error);\n                                if (loading) loading.style.display = 'none';\n                                container.innerHTML = '';\n                            });\n                    };\n\n                }\n\n                \/\/ Log that the function is ready to receive updates from search\n            });\n        <\/script>\n                <\/div>\n    <\/div>\n<\/div>\n\n\n<!-- Add error display container \n<div id=\"typesense-errors\" style=\"display:none; color: red; margin: 10px 0;\"><\/div>-->\n\n<script>\n\n\/\/ searchClient is now defined above before InstantSearch initialization\nconsole.log('setupUniversalRangeAutoSubmit');\n\n\naddPaginationScroll();\n\n<\/script>\n\n\n<div id=\"yatco-contact-modal\" class=\"yt-modal single-yacht-modal single-yacht-modal-email-broker\">\n    <div class=\"bg-white rounded-lg shadow-xl flex flex-col md:flex-row overflow-hidden w-full max-w-3xl border border-[#067AED]\">\n        <div class=\"bg-[#067AED] p-3 flex flex-col items-center justify-center text-white w-full md:w-1\/3\">\n            <div class=\"w-20 h-20 rounded-full overflow-hidden mb-2\">\n                <img decoding=\"async\" class=\"w-full h-full object-cover broker-modal-image\" src=\"\" alt=\"Broker\">\n            <\/div>\n            <h6 class=\"text-base text-center font-semibold mb-1 broker-name\" id=\"brokerName\"><\/h6>\n            <p class=\"text-xs text-center mb-1 brokerage\" id=\"companyName\"><\/p>\n        <\/div>\n        <div class=\"p-5 w-full md:w-2\/3\">\n            <h4 class=\"text-xl sm:text-2xl font-bold text-center text-gray-800 mb-2\">\n                Contact Broker            <\/h4>\n            <p class=\"text-center text-gray-600 mb-3\">Speak with our expert broker<\/p>\n\n            <form action=\"#\" id=\"form-vessel-results-sale\" class=\"contact-broker-form space-y-3\">\n                <!-- Hidden Inputs -->\n                <input type=\"hidden\" name=\"VesselID\" value=\"\">\n                <input type=\"hidden\" name=\"CompanyID\" value=\"\">\n                <input type=\"hidden\" name=\"FormTypeID\" value=\"9\">\n                <input type=\"hidden\" name=\"form_guid\" value=\"027c8862-b2cd-4e52-8a4e-b40f955e91fc\">\n                <input type=\"hidden\" name=\"length\" value=\"\">\n                <input type=\"hidden\" name=\"vessel_price\" value=\"\">\n                <input type=\"hidden\" name=\"vessel_price_usd\" value=\"\">\n                <input type=\"hidden\" name=\"vessel_category\" value=\"\">\n                <input type=\"hidden\" name=\"vessel_name\" value=\"\">\n                <input type=\"hidden\" name=\"vessel_subcategory\" value=\"\">\n                <input type=\"hidden\" name=\"make\" value=\"\">\n                <input type=\"hidden\" name=\"vessel_location\" value=\"\">\n                <input type=\"hidden\" name=\"listing_broker\" value=\"\">\n                <input type=\"hidden\" name=\"lead_type\" value=\"Sales Brokerage\">\n                <input type=\"hidden\" name=\"ReferrerUrl\" value=\"\">\n                <input type=\"hidden\" id=\"ReferringSite\" class=\"Referringsite\" name=\"ReferringSite\" value=\"\">\n                <input type=\"text\" name=\"contact_me_by_fax_only\" style=\"display:none !important\" tabindex=\"-1\" autocomplete=\"off\">\n\n                <!-- Form Fields (wrapped in 'hide-after-submit') -->\n                <div class=\"hide-after-submit\">\n                    <div class=\"grid grid-cols-2 gap-2\">\n                        <div class=\"my-2.5\">\n                            <input type=\"text\" id=\"firstName\" name=\"FirstName\" required aria-label=\"First Name\" class=\"w-full px-3 py-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition duration-150 ease-in-out\" placeholder=\"First Name\">\n                        <\/div>\n                        <div class=\"my-2.5\">\n                            <input type=\"text\" id=\"lastName\" name=\"LastName\" required aria-label=\"Last Name\" class=\"w-full px-3 py-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition duration-150 ease-in-out\" placeholder=\"Last Name\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"my-2.5\">\n                        <input type=\"tel\" id=\"phone\" name=\"Phone\" required aria-label=\"Phone Number\" class=\"w-full px-3 py-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition duration-150 ease-in-out\" placeholder=\"Phone Number\">\n                    <\/div>\n                    <div class=\"my-2.5\">\n                        <input type=\"email\" id=\"email\" name=\"Email\" required aria-label=\"Email\" class=\"w-full px-3 py-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition duration-150 ease-in-out\" placeholder=\"Email Address\">\n                    <\/div>\n                    <div class=\"my-2.5\">\n                        <textarea id=\"message\" name=\"Message\" rows=\"3\" required aria-label=\"Message\" class=\"w-full px-3 py-2 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition duration-150 ease-in-out\" placeholder=\"Your message here...\"><\/textarea>\n                    <\/div>\n                    <div class=\"yt-input-block agree hidden\">\n                        <label>\n                            <input type=\"radio\" name=\"owner_or_industry\" value=\"owner\"> I am interested in the vessel.\n                        <\/label>\n                        <label>\n                            <input type=\"radio\" name=\"owner_or_industry\" value=\"industry\" style=\"display: inline-block;\"> I work in the yachting industry.\n                        <\/label>\n                    <\/div>\n                    <div class=\"hidden\">\n                        <label>\n                            <input type=\"checkbox\" name=\"agree_with\" value=\"yes\" required checked> I agree with Yatco's <a href=\"https:\/\/www.yatco.com\/privacy-policy\/\" >Privacy Policy<\/a>.\n                        <\/label>\n                    <\/div>\n                    <div class=\"yatco-g-recaptcha\" data-sitekey=\"6LdVBRMUAAAAAHg0C9lZj0tgGpXuHjuY1c5oYWPw\"><\/div>\n\n                    <!-- Submit Button -->\n                    <div class=\"my-2.5\">\n                        <input type=\"submit\" value=\"Contact Broker\" class=\"yt-btn yt-btn-block\">\n                    <\/div>\n                <\/div>\n\n                <!-- Success Message -->\n                <div class=\"form-success-message\" style=\"display: none; font-size: 75%;\">\n                    <div class=\"yt-alert yt-alert-success yt-text-center\" role=\"alert\">\n                        Your form has been submitted. <br> The listing broker will contact you shortly.                    <\/div>\n                <\/div>\n            <\/form>\n        <\/div>\n    <\/div>\n<\/div>\n\n\n\n<div id=\"yatco-vd-contact-modal\" class=\"yt-modal single-yacht-modal single-yacht-modal-email-broker\">\n\n\t<form action=\"#\" id=\"form-vessel-results\" class=\"contact-broker-form\">\n\n\t    <input type=\"hidden\" name=\"VesselID\" value=\"\">\n\t    <input type=\"hidden\" name=\"CompanyID\" value=\"\">\n\t    <input type=\"hidden\" name=\"FormTypeID\" value=\"9\">\n\t\t<input type=\"hidden\" name=\"form_guid\" value=\"027c8862-b2cd-4e52-8a4e-b40f955e91fc\">\n\t\t<input type=\"hidden\" name=\"length\" value=\"\">\n\t\t<input type=\"hidden\" name=\"vessel_category\" value=\"\">\n\t\t<input type=\"hidden\" name=\"vessel_name\" value=\"\">\n\t\t<input type=\"hidden\" name=\"vessel_subcategory\" value=\"\">\n\t\t<input type=\"hidden\" name=\"make\" value=\"\">\n\t\t<input type=\"hidden\" name=\"vessel_location\" value=\"\">\n\t\t<input type=\"hidden\" name=\"listing_broker\" value=\"\">\n\t\t<input type=\"hidden\" name=\"lead_type\" value=\"Sales Brokerage\">\n   \t\t<input type=\"hidden\" name=\"ReferrerUrl\" value=\"\">\n        <input type=\"hidden\" id=\"ReferringSite\" class=\"Referringsite\" name=\"ReferringSite\" value=\"\">\n   \t\t<input type=\"text\" name=\"contact_me_by_fax_only\" style=\"display:none !important\" tabindex=\"-1\" autocomplete=\"off\">\n\n\t    <div class='hide-after-submit'>\n\t    \t<div class=\"headings\">\n\t\t    \t<h4>\n\t\t    \t\tRequest More Information\n\t\t    \t<\/h4>\n\n\t\t    \t<div class=\"yt-input-block\">\n\t\t\t\t\t<h5 class=\"broker-name\">\n\t\t\t\t\t\tContact a listing broker for information on similar vessels for sale.\n\t\t\t\t\t<\/h5>\n\n\t\t\t\t\t<h5 class=\"brokerage\"><\/h5>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\t\t      <input type=\"text\" name=\"FirstName\" placeholder=\"First Name*\" required=\"\" class=\"yt-input\">\n\t\t    <\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\t\t      <input type=\"text\" name=\"LastName\" placeholder=\"Last Name*\" required=\"\" class=\"yt-input\">\n\t\t    <\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\t\t      <input type=\"email\" name=\"Email\" placeholder=\"Email Address*\" required=\"\" class=\"yt-input\">\n\t\t    <\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\t\t      <input type=\"tel\" name=\"Phone\" placeholder=\"Phone Number*\"  required=\"required\"  class=\"yt-input\">\n\t\t    <\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\t\t    \t<textarea name=\"Message\" placeholder=\"Message*\" required=\"\" class=\"yt-input\" rows='5' style=\"resize: none;\"><\/textarea>\n\t\t    <\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\t\t\t\t<label>\n\t\t\t\t\t<input type=\"radio\" name=\"owner_or_industry\" value=\"owner\">\n\t\t\t\t\tI am interested in the vessel.\n\t\t\t\t<\/label>\n\t\t\t\t<label style=\"display: block;\">\n\t\t\t\t\t<input type=\"radio\" name=\"owner_or_industry\" value=\"industry\" style=\"display: inline-block;\">\n\t\t\t\t\tI work in the yachting industry.\n\t\t\t\t<\/label>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"yt-input-block\">\n\t\t\t\t<label>\n\t\t\t\t\t<input type=\"checkbox\" name=\"agree_with\" value=\"yes\" required checked>\n\n\t\t\t\t\tI agree with Yatco's <a href=\"https:\/\/www.yatco.com\/privacy-policy\/\" rel=\"nofollow\">Privacy Policy<\/a>.\n\t\t\t\t<\/label>\n\t\t\t<\/div>\n\n\t\t    <div class=\"yt-input-block\">\n\n            \t<div class=\"yatco-g-recaptcha\" data-sitekey=\"6LdVBRMUAAAAAHg0C9lZj0tgGpXuHjuY1c5oYWPw\"><\/div>\n\n            <\/div>\n\n\t\t    <input type=\"submit\" value=\"Contact Broker\" class=\"yt-btn yt-btn-block\" \/>\n\t    <\/div>\n\n\t    <div class=\"form-success-message\" style=\"display: none; font-size: 75%;\">\n\t\t    <div class=\"yt-alert yt-alert-success yt-text-center\" role=\"alert\">\n\t\t    \tYour form has been submitted. <br> The listing broker will contact you shortly.\t\t    <\/div>\n\t\t<\/div>\n\t <\/form>\n\n<\/div>\n<!-- Floating Compare Button -->\n<div id=\"compare-float-btn\" class=\"cursor-pointer fixed left-0 top-1\/2 transform -translate-y-1\/2 bg-blue-600 text-white p-3 rounded-r-lg shadow-lg hover:bg-blue-700 z-40 hidden\" style=\"width: 43px; height: 80px;\">\n    <span onclick=\"fetchComparisonData()\" class=\"flex flex-col items-center justify-center\">\n        <span class=\"compare-icon w-4 h-4\"><\/span>\n        <span id=\"compare-count\" class=\"text-xs\"><\/span>\n        <span class=\"text-[8px]\">Compare<\/span>\n    <\/span>\n    <div id=\"loading-spinner\" class=\"hidden\">\n        <span class=\"compare-loading h-4 w-4 block\"><\/span>\n    <\/div>\n<\/div>\n\n<!-- Modal for Comparison Table -->\n<div id=\"compare-modal\" class=\"fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden\">\n    <div class=\"relative bg-white w-full max-w-4xl p-6 shadow-lg rounded-lg\">\n        <div class=\"flex justify-between items-center mb-4\">\n            <h3 class=\"text-xl font-bold border-b-4 border-blue-500\">Yachts Details Comparison<\/h3>\n                <span  onclick=\"clearComparison()\" class=\"close-icon h-6 w-6 cursor-pointer\"><\/span>\n        <\/div>\n        <div class=\"overflow-x-auto\">\n            <table class=\"min-w-full bg-white\">\n                <thead id=\"compare-header\" class=\"bg-gray-200\">\n\n                <\/thead>\n                <tbody id=\"compare-table-body\">\n                <!-- Comparison data will be injected here -->\n                <\/tbody>\n            <\/table>\n        <\/div>\n        <div class=\"mt-4\">\n            <button class=\"w-full bg-red-500 text-white py-2 rounded-lg hover:bg-red-600\" onclick=\"clearComparison()\">Clear Comparison<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n \n <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":40,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-286509","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.5 (Yoast SEO v26.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Yachts for Sale | YATCO<\/title>\n<meta name=\"description\" content=\"Search for yachts for sale by brand, price, year, length, and more on YATCO, the most comprehensive search engine in the industry.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yatco.com\/yachts-for-sale\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yachts For Sale\" \/>\n<meta property=\"og:description\" content=\"Search for yachts for sale by brand, price, year, length, and more on YATCO, the most comprehensive search engine in the industry.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yatco.com\/yachts-for-sale\/\" \/>\n<meta property=\"og:site_name\" content=\"YATCO Luxury Yachts for Sale, Superyacht Charter &amp; Business Services\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/searchyatco\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-02T11:17:51+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@SearchYATCO\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.yatco.com\/yachts-for-sale\/\",\"url\":\"https:\/\/www.yatco.com\/yachts-for-sale\/\",\"name\":\"Yachts for Sale | YATCO\",\"isPartOf\":{\"@id\":\"https:\/\/www.yatco.com\/#website\"},\"datePublished\":\"2025-08-25T11:44:46+00:00\",\"dateModified\":\"2025-09-02T11:17:51+00:00\",\"description\":\"Search for yachts for sale by brand, price, year, length, and more on YATCO, the most comprehensive search engine in the industry.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.yatco.com\/yachts-for-sale\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.yatco.com\/yachts-for-sale\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.yatco.com\/yachts-for-sale\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.yatco.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Yachts For Sale\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.yatco.com\/#website\",\"url\":\"https:\/\/www.yatco.com\/\",\"name\":\"YATCO\",\"description\":\"The Tech &amp; Connect Platform of Yachting\u2122\",\"publisher\":{\"@id\":\"https:\/\/www.yatco.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.yatco.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Organization\",\"Place\"],\"@id\":\"https:\/\/www.yatco.com\/#organization\",\"name\":\"YATCO\",\"url\":\"https:\/\/www.yatco.com\/\",\"logo\":{\"@id\":\"https:\/\/www.yatco.com\/yachts-for-sale\/#local-main-organization-logo\"},\"image\":{\"@id\":\"https:\/\/www.yatco.com\/yachts-for-sale\/#local-main-organization-logo\"},\"sameAs\":[\"https:\/\/www.facebook.com\/searchyatco\/\",\"https:\/\/x.com\/SearchYATCO\",\"https:\/\/www.instagram.com\/searchyatco\/?hl=en\",\"https:\/\/www.youtube.com\/channel\/UCJTLLHYgQN-PeWdMU2acTfw\",\"https:\/\/www.linkedin.com\/company\/yatco\"],\"telephone\":[],\"openingHoursSpecification\":[{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\",\"Sunday\"],\"opens\":\"09:00\",\"closes\":\"17:00\"}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.yatco.com\/yachts-for-sale\/#local-main-organization-logo\",\"url\":\"https:\/\/yatcowpmedialibrary.nyc3.cdn.digitaloceanspaces.com\/wp-content\/uploads\/2024\/06\/YATCO_Logo_Blue20_300_300dpi-01-copy.png\",\"contentUrl\":\"https:\/\/yatcowpmedialibrary.nyc3.cdn.digitaloceanspaces.com\/wp-content\/uploads\/2024\/06\/YATCO_Logo_Blue20_300_300dpi-01-copy.png\",\"width\":903,\"height\":242,\"caption\":\"YATCO\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Yachts for Sale | YATCO","description":"Search for yachts for sale by brand, price, year, length, and more on YATCO, the most comprehensive search engine in the industry.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yatco.com\/yachts-for-sale\/","og_locale":"en_US","og_type":"article","og_title":"Yachts For Sale","og_description":"Search for yachts for sale by brand, price, year, length, and more on YATCO, the most comprehensive search engine in the industry.","og_url":"https:\/\/www.yatco.com\/yachts-for-sale\/","og_site_name":"YATCO Luxury Yachts for Sale, Superyacht Charter &amp; Business Services","article_publisher":"https:\/\/www.facebook.com\/searchyatco\/","article_modified_time":"2025-09-02T11:17:51+00:00","twitter_card":"summary_large_image","twitter_site":"@SearchYATCO","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.yatco.com\/yachts-for-sale\/","url":"https:\/\/www.yatco.com\/yachts-for-sale\/","name":"Yachts for Sale | YATCO","isPartOf":{"@id":"https:\/\/www.yatco.com\/#website"},"datePublished":"2025-08-25T11:44:46+00:00","dateModified":"2025-09-02T11:17:51+00:00","description":"Search for yachts for sale by brand, price, year, length, and more on YATCO, the most comprehensive search engine in the industry.","breadcrumb":{"@id":"https:\/\/www.yatco.com\/yachts-for-sale\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yatco.com\/yachts-for-sale\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.yatco.com\/yachts-for-sale\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yatco.com\/"},{"@type":"ListItem","position":2,"name":"Yachts For Sale"}]},{"@type":"WebSite","@id":"https:\/\/www.yatco.com\/#website","url":"https:\/\/www.yatco.com\/","name":"YATCO","description":"The Tech &amp; Connect Platform of Yachting\u2122","publisher":{"@id":"https:\/\/www.yatco.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yatco.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Organization","Place"],"@id":"https:\/\/www.yatco.com\/#organization","name":"YATCO","url":"https:\/\/www.yatco.com\/","logo":{"@id":"https:\/\/www.yatco.com\/yachts-for-sale\/#local-main-organization-logo"},"image":{"@id":"https:\/\/www.yatco.com\/yachts-for-sale\/#local-main-organization-logo"},"sameAs":["https:\/\/www.facebook.com\/searchyatco\/","https:\/\/x.com\/SearchYATCO","https:\/\/www.instagram.com\/searchyatco\/?hl=en","https:\/\/www.youtube.com\/channel\/UCJTLLHYgQN-PeWdMU2acTfw","https:\/\/www.linkedin.com\/company\/yatco"],"telephone":[],"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"opens":"09:00","closes":"17:00"}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.yatco.com\/yachts-for-sale\/#local-main-organization-logo","url":"https:\/\/yatcowpmedialibrary.nyc3.cdn.digitaloceanspaces.com\/wp-content\/uploads\/2024\/06\/YATCO_Logo_Blue20_300_300dpi-01-copy.png","contentUrl":"https:\/\/yatcowpmedialibrary.nyc3.cdn.digitaloceanspaces.com\/wp-content\/uploads\/2024\/06\/YATCO_Logo_Blue20_300_300dpi-01-copy.png","width":903,"height":242,"caption":"YATCO"}]}},"_links":{"self":[{"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/pages\/286509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/comments?post=286509"}],"version-history":[{"count":5,"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/pages\/286509\/revisions"}],"predecessor-version":[{"id":286515,"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/pages\/286509\/revisions\/286515"}],"wp:attachment":[{"href":"https:\/\/www.yatco.com\/wp-json\/wp\/v2\/media?parent=286509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}