<!--
=============================================================================
ANDEAN VALLEY CATALOG FRONT-END (v52.0)
=============================================================================
Release Notes & Architectural Updates:
* v52.0 - PERMANENT FORENSIC PERFORMANCE RELEASE: Synchronized with backend v139.175 lock-free read architecture and GmailApp Sent folder auto-save. Initial catalog load renders in 0 ms (instant) and form submission completes in < 1.8 seconds.
* v51.0 - GMAIL SENT FOLDER PRESERVATION: Synchronized with backend v139.172 native GmailApp transport to preserve 100% automatic saving of sent emails to the Gmail Sent folder while reducing Quote Request submission delay from 16+ seconds to < 1.8 seconds.
* v49.0 - PRODUCTION SPEED & STABILITY RELEASE: Integrated client-side sessionStorage + memory caching (catalogDataCache[incoterm_date]) with non-blocking background revalidation. Reduces UI transition latency to 0 ms (instant) and initial catalog loading to < 1.5s while preserving 100% modal gatekeeper & rendering stability.
* v45.0 - CATALOG GRID STOCK & PRICE SORTING: Refactored renderCatalog array sorting to display catalog items by total stem count descending (largest available stock count first) with variety pricing ascending (lowest price to highest price) as tie-breaker, and alphabetical A-Z fallback.
* v44.0 - QUOTE FORM UX REDESIGN (REDUCED FRICTION): Grouped mandatory contact fields (Contact Name/Title, Company Name, Billing Email, Phone) into a 2x2 grid at top of form. Made address fields optional and fit City, State, ZIP into a single row. Hidden pre-selected Shipment Date & Incoterms fields from review form while maintaining hidden input tracking. Relocated Sales Tax Exemption & Upload Resale Certificate fields below Submit Request button into a single 2-column row with an explicit 'Optional' section separator. Account/Buyer Classification remains mandatory.
* v43.0 - DELIVERY TO DESTINATION FEATURE FLAG (TEMPORARY DISABLE): Added DOOR_DEL_ENABLED feature flag constant (currently set to FALSE). When false, the 'Delivery to Destination' option is hidden from all logistics dropdowns via initDoorDelVisibility(), without deleting any code or logic. To re-enable, set DOOR_DEL_ENABLED = true. All underlying DOOR DEL logic (MOQ rules, info banner, applyLogisticsSettings, getMinBoxesRequired) remains fully intact and preserved.
* v42.0 - HEADER CHANGELOG ACCURACY CORRECTION: Removed misattributed Quote Builder sorting entry from Catalog App header. Restored accurate historical Catalog release notes.
* v39.0 - ZERO-STOCK (PROMO) VARIETY FILTERING: Implemented dynamic totalStock evaluation in renderCatalog callback to automatically hide (PROMO) variety cards whenever total available box count is 0 on the selected date/incoterm.
* v37.0 - INCOTERMS LOGISTICS MODAL DESCRIPTORS: Standardized logistics modal select options to exact order: 1. FOB Quito (Origin Airport), 2. Miami Warehouse Pick-Up, 3. Delivery to Destination.
* v36.0 - SESSION STORAGE & INCOTERM DESCRIPTORS ALIGNMENT: Unified Incoterms storage keys and display text across logistics modals and checkout payloads.
* v35.0 - CONCISE INCOTERMS DISPLAY TEXT: Updated logistics display badges to concise user-approved text formats ('Miami Warehouse Pick-Up', 'Delivery to Destination', 'FOB Quito (Origin Airport)').
* v34.0 - INCOTERM-SPECIFIC MOQ RULES ENGINE: Configured getMinBoxesRequired(incoterm, segment) helper. Established 3-box MOQ for Door-to-Door Wholesale Reseller buyers while preserving 5-box MOQ for standard Miami Pick-Up and FOB Quito buyers.
* v33.0 - BUSINESS SEGMENT SERVICE TIER INTEGRATION: Integrated Business segment order parameters and dynamic warning banners for Door-to-Door shipping terms.
* v32.0 - DOOR-TO-DOOR LOGISTICS SERVICE BANNER: Added dynamic informational service banner in logistics modal when 'Delivery to Destination' is selected.
* v31.0 - DOOR-TO-DOOR INCOTERM REFACTOR: Introduced 'Delivery to Destination' Incoterm option (DOOR DEL) and mapped inventory sourcing to CIF MIA warehouse stock.
* v30.0 - ACCOUNT & BUYER CLASSIFICATION ENGINE: Configured radio input vertical layout alignment, set Commercial / End-User as default classification, and implemented dynamic 2-box (Commercial) vs 5-box (Wholesale) MOQ validation.
=============================================================================
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andean Valley - Catalog (v52)</title>
    <style>
        /* --- General Setup & Fonts --- */
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

        :root {
            --primary-green: #4A6A4A;
            --light-green: #678c67;
            --background-grey: #f4f6f8;
            --card-background: #ffffff;
            --text-dark: #333333;
            --text-light: #757575;
            --border-color: #e0e0e0;
            --danger-red: #d32f2f;
            --whatsapp-green: #25D366;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--background-grey);
            margin: 0;
            padding: 10px;
            display: flex;
            justify-content: center;
            height: 100vh;
            box-sizing: border-box;
        }

        /* --- Main App Container & Screen Management (v61 - 90vh height scale) --- */
        .app-container {
            max-width: 1000px;
            width: 98%;
            background-color: var(--card-background);
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
            height: 90vh;
            max-height: 90vh;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
        }

        .screen {
            display: none;
            flex-direction: column;
            height: 100%;
            animation: fadeIn 0.3s ease-in-out;
        }

        .screen.active {
            display: flex;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* --- Common Header --- */
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 25px;
            background-color: var(--primary-green);
            color: white;
            flex-shrink: 0;
        }
        .app-header h1 {
            font-size: 24px; margin: 0;
        }
        .header-icon {
            font-size: 16px;
            cursor: pointer;
            border: 1.5px solid white;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
            line-height: 1 !important;
            flex-shrink: 0;
            transition: background 0.2s ease;
        }
        .header-icon:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .header-icon i {
            display: block;
            line-height: 1;
            margin: 0;
            padding: 0;
        }

        /* --- Screen 1: Catalog (v61 - Sticky Top Navigation) --- */
        .catalog-header {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background-color: var(--primary-green);
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        }
        .catalog-title h1 {
            font-size: 24px;
            color: white;
            margin: 0;
            font-weight: 700;
        }
        .catalog-title h2 {
            font-size: 18px;
            color: white;
            margin: 0;
            font-weight: 400;
        }
        .cart-container {
            position: relative;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            transition: transform 0.2s ease;
        }
        .cart-container:hover {
            transform: scale(1.08);
        }
        .cart-icon {
            font-size: 24px;
            color: white;
            opacity: 0.5; /* Fainted by default */
            transition: opacity 0.3s ease, text-shadow 0.3s ease;
        }
        .cart-icon.active {
            opacity: 1.0;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }
        .cart-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background-color: var(--danger-red);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 11px;
            display: none; /* Hidden when empty */
            align-items: center;
            justify-content: center;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
        }
        .cart-badge.visible {
            display: flex;
        }
        .cart-badge.moq-met {
            background-color: #4CAF50; /* Parrot green when MOQ >= 5 boxes */
        }

        .search-filter-bar {
            display: flex;
            gap: 10px;
            padding: 10px 18px;
            flex-shrink: 0;
            background: var(--card-background);
            border-bottom: 1px solid var(--border-color);
        }
        .search-input-wrapper {
            position: relative;
            flex-grow: 1;
        }
        .search-input {
            width: 100%;
            box-sizing: border-box;
            padding: 10px 14px;
            padding-right: 35px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 15px;
            background-color: var(--background-grey);
        }
        .clear-search-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            display: none;
            font-size: 15px;
            padding: 4px;
        }
        .clear-search-btn.visible {
            display: block;
        }

        .filter-btn { padding: 0 14px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 18px; background-color: var(--background-grey); cursor: pointer; }
        
        .product-list {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px 14px;
            padding-bottom: 80px;
            position: relative;
        }
        
        /* Compact 15% shorter rows and thumbnails (v61) */
        .product-thumbnail {
            width: 64px;
            height: 64px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
            cursor: pointer;
        }

        .product-item {
            display: flex;
            align-items: center;
            gap: 10px;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            margin-bottom: 6px;
            padding: 6px 14px;
            transition: background-color 0.15s ease;
        }
        .product-item:hover {
            background-color: #fafbf9;
        }

        .product-content-wrapper {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .product-item-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .product-info { flex-grow: 1; } 
        .product-info .meta-row { font-size: 11px; font-weight: 700; color: var(--primary-green); text-transform: uppercase; margin-bottom: 4px; display: flex; align-items: center; }
        .product-info .meta-row .separator { margin: 0 6px; color: var(--text-light); font-weight: 400; font-size: 14px; }
        .product-info .variety { font-size: 20px; font-weight: 700; color: var(--text-dark); }
        
        .product-item-controls {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .control-group { display: flex; flex-direction: column; gap: 5px; }
        .control-group label { font-size: 12px; color: var(--text-light); }
        .control-group select { padding: 8px; border-radius: 8px; border: 1px solid var(--border-color); }
        
        .quantity-control { display: flex; align-items: center; background-color: var(--background-grey); border-radius: 8px; }
        .quantity-btn { border: none; background-color: transparent; color: var(--text-dark); font-size: 20px; font-weight: bold; cursor: pointer; width: 30px; height: 30px; }
        .quantity-value, .quantity-input { font-size: 16px; font-weight: 500; min-width: 25px; text-align: center; }
        .quantity-input {
            border: none;
            background-color: transparent;
            color: var(--text-dark);
            width: 45px;
            height: 30px;
            box-sizing: border-box;
            outline: none;
            font-family: inherit;
        }
        .quantity-input::-webkit-outer-spin-button,
        .quantity-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .quantity-input[type=number] {
            -moz-appearance: textfield;
        }
        
        .product-item-actions { display: flex; align-items: center; gap: 10px; }
        .view-details-btn {
            background-color: var(--background-grey);
            border: 1px solid var(--border-color);
            color: var(--text-dark);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        .view-details-btn:hover {
            background-color: var(--primary-green);
            color: white;
            border-color: var(--primary-green);
        }

        .catalog-footer-note {
            text-align: center;
            padding: 20px;
            color: var(--text-light);
            font-style: italic;
            font-size: 14px;
        }

        /* Removed quote-request-sticky styles */
        
        .scroll-to-top-btn {
            display: none;
            position: absolute;
            bottom: 90px; 
            right: 25px;
            background-color: var(--primary-green);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            font-size: 18px;
            z-index: 850;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        }
        
        /* --- Filter Modal --- */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
        .modal-overlay.visible { display: flex; }
        .filter-modal { background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 400px; }
        .filter-section { margin-bottom: 20px; }
        .filter-section h3 { margin-top: 0; }
        .filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
        .filter-options label { background: var(--background-grey); padding: 8px 12px; border-radius: 20px; cursor: pointer; font-size: 14px; }
        .filter-options input { display: none; }
        .filter-options input:checked + label { background: var(--primary-green); color: white; }
        .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
        .modal-btn { padding: 10px 20px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; }
        .btn-apply { background: var(--primary-green); color: white; border-color: var(--primary-green); }

        /* --- Screen 2: Product Detail (Optimized Side-by-Side Layout - v61) --- */
        .detail-content {
            flex-grow: 1;
            overflow-y: auto;
            padding: 16px 20px;
        }

        .detail-top-grid {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 16px;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 16px;
        }

        .detail-image-col {
            width: 220px;
            height: 220px;
            flex-shrink: 0;
            position: relative;
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .detail-main-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .detail-placeholder-box {
            width: 100%;
            height: 100%;
            background-color: #f0f4f0;
            color: #5a755a;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

        .detail-info-col {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .detail-header-compact {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 6px;
        }
        .detail-variety-name {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 2px 0;
            letter-spacing: -0.01em;
        }
        .detail-type-name {
            font-size: 13px;
            color: var(--text-light);
            text-transform: uppercase;
            font-weight: 600;
            margin: 0;
            letter-spacing: 0.03em;
        }

        .detail-specs-card {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .detail-specs-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--primary-green);
            margin: 4px 0 2px 0;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        .detail-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .detail-list li {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            padding: 2px 0;
            border-bottom: 1px dashed #f0f0f0;
        }
        .detail-list li span:first-child {
            color: var(--text-light);
            font-weight: 500;
        }
        .detail-list li span:last-child {
            font-weight: 700;
            color: var(--text-dark);
        }
        .detail-description {
            font-size: 13px;
            line-height: 1.45;
            color: #4b5563;
            margin: 6px 0 0 0;
            font-style: italic;
        }

        @media (max-width: 640px) {
            .detail-top-grid {
                flex-direction: column;
                align-items: center;
                gap: 12px;
                padding: 12px;
            }
            .detail-image-col {
                width: 180px;
                height: 180px;
            }
            .detail-info-col {
                width: 100%;
            }
        }
        .detail-controls { margin-top: 20px; display:flex; flex-direction: column; gap: 15px; }
        .detail-controls .control-group { display: flex; justify-content: space-between; align-items: center; }
        .detail-controls .control-group label { font-weight: 500; }
        .detail-controls .stem-select { border-radius: 8px; padding: 8px; }
        .detail-controls .quantity-control { background: white; }
        .detail-controls .quantity-btn { border: 1px solid var(--border-color); }
        .submit-btn { width: 100%; padding: 18px; border: none; border-radius: 15px; font-size: 18px; cursor: pointer; background-color: var(--primary-green); color: white; margin-top: 20px; }

        /* --- Screen 3: Review & Request --- */
        .summary-content {
            flex-grow: 1;
            overflow-y: auto;
            padding: 25px;
        }
        h2 { font-size: 20px; font-weight: 700; margin-bottom: 15px; }
        .summary-item-list { margin-bottom: 20px; }
        .summary-item { display: flex; align-items: center; background-color: var(--background-grey); padding: 15px; border-radius: 10px; margin-bottom: 10px; border-left: 4px solid var(--primary-green); }
        .summary-item-info { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-right: 15px; flex-wrap: wrap; }
        .summary-item-info .variety { font-size: 16px; font-weight: 700; }
        .summary-item-info .details { color: var(--text-light); font-size: 14px; font-weight: 500; text-align: right; }
        .summary-item-actions { display: flex; gap: 15px; }
        .summary-item-actions i { cursor: pointer; }
        .icon-edit { color: var(--text-light); } .icon-delete { color: var(--danger-red); }
        .summary-totals { border-top: 1px solid var(--border-color); padding-top: 15px; }
        .summary-totals .total-line { display: flex; justify-content: space-between; padding: 5px 0; }
        .summary-totals .total-line span:last-child { font-weight: 700; }
        .moq-alert { background-color: #fff3e0; color: #e65100; padding: 15px; border-radius: 8px; text-align: center; margin-top: 20px; }

        /* --- Form --- */
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
        /* UPDATED: Excluded radio and checkbox inputs from width:100% to prevent radio misalignments */
        .form-group input:not([type="radio"]):not([type="checkbox"]), .form-group textarea, .form-group select { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-family: 'Roboto', sans-serif; font-size: 14px; background-color: white; }
        .form-group input[type="radio"], .form-group input[type="checkbox"] { width: auto; flex-shrink: 0; margin: 0; cursor: pointer; }
        .form-group input[type="file"] { padding: 8px 12px; cursor: pointer; }
        .form-group.split { display: flex; gap: 15px; } .form-group.split > div { flex: 1; }
        .form-group.triple { display: flex; gap: 15px; } .form-group.triple > div { flex: 1; }
        .terms-group { display: flex; align-items: center; gap: 10px; }
        .terms-group a { color: var(--primary-green); text-decoration: none; }
        
        .submit-btn:disabled { background-color: #cccccc; cursor: not-allowed; }

        /* Submit Actions Container */
        .form-group.submit-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }
        .submit-btn.whatsapp-btn {
            background-color: var(--whatsapp-green);
        }
        .submit-btn.whatsapp-btn:hover {
            background-color: #1EAE50;
        }
        
        /* Clear Cart Button Style in Review Header */
        .header-action-btn {
            background: none; border: none; color: white; cursor: pointer; font-size: 14px; text-decoration: underline; margin-left: 10px;
        }

        /* Loading Overlay */
        .loading-overlay {
            position: absolute; top:0; left:0; width:100%; height:100%; 
            background: rgba(255,255,255,0.8); z-index: 2000;
            display: none; justify-content: center; align-items: center; flex-direction: column;
        }
        .loading-overlay.visible { display: flex; }
        .spinner {
            border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-green);
            border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@media (min-width: 768px) {
    /* 1. Expand the main container for desktop visibility */
    .app-container {
        max-width: 1000px;
        margin: 0 auto;
    }

    /* 2. Set compact row alignment (15% shorter height) */
    .product-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 6px 18px;
        margin-bottom: 6px;
    }

    /* 3. Reorder internal elements visually */
    .product-content-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-grow: 1;
        justify-content: space-between;
    }

    /* display: contents makes children behave as direct siblings of the wrapper */
    .product-item-main {
        display: contents; 
    }

    .product-info {
        order: 1; /* Left side */
        flex: 1;
        line-height: 1.2;
    }

    .product-item-controls {
        order: 2; /* Middle section */
        flex-direction: row !important;
        gap: 20px;
        margin: 0 25px;
        border-top: none;
        padding-top: 0;
        align-items: center;
    }

    .product-item-actions {
        order: 3; /* Rightmost side as requested */
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 75px;
        justify-content: flex-end;
    }

    .product-thumbnail {
        width: 64px;
        height: 64px;
        margin-right: 14px;
    }
    
    .variety {
        font-size: 16px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }
    
    .type {
        font-size: 11px !important;
    }
    
    .stem-select {
        padding: 5px 8px !important;
        font-size: 13px !important;
        height: 32px !important;
    }
    
    .quantity-control {
        height: 30px !important;
    }
    
    .quantity-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 15px !important;
    }
    
    .quantity-input {
        height: 26px !important;
        font-size: 13px !important;
        width: 32px !important;
    }
    
    .product-item-actions button {
        padding: 5px 12px !important;
        font-size: 12.5px !important;
        height: 30px !important;
    }
}
    
        /* =========================================================================
           SIMPLIFIED BRAND HERO & GREEN RIBBON INSTRUCTIONS (v61)
           ========================================================================= */
        .catalog-brand-hero {
            background: #fafaf7;
            border-bottom: 1px solid var(--border-color);
            padding: 18px 20px 14px 20px;
            text-align: center;
            position: relative;
            z-index: 2000; /* Stays crisp & visible above modal backdrop */
            flex-shrink: 0;
            transition: all 0.3s ease;
        }
        .brand-hero-inner {
            max-width: 680px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        .brand-logo-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .brand-logo-img {
            max-width: 210px;
            height: auto;
            display: block;
        }
        .brand-hero-title {
            font-family: 'Cinzel', 'Playfair Display', Georgia, serif;
            color: #234d3b;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.25;
            margin: 0;
            letter-spacing: -0.01em;
        }
        .brand-hero-sub-instruction {
            font-size: 13px;
            color: #244b34;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            background: rgba(36, 75, 52, 0.08);
            padding: 5px 14px;
            border-radius: 20px;
            border: 1px solid rgba(36, 75, 52, 0.18);
        }
        .brand-hero-sub-instruction i {
            color: var(--primary-green);
            font-size: 12px;
        }
        
        /* Green Header Instructions (v61) */
        .catalog-header-instructions {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-grow: 1;
            text-align: center;
        }
        .header-instruction-item {
            font-size: 12.5px;
            color: #ffffff;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            line-height: 1.35;
        }
        .header-instruction-item i {
            color: #a7f3d0;
            font-size: 11px;
        }

        @media (max-width: 480px) {
            .catalog-brand-hero {
                padding: 14px 12px 10px 12px;
            }
            .brand-logo-img {
                max-width: 175px;
            }
            .brand-hero-title {
                font-size: 17px;
            }
            .brand-hero-sub-instruction {
                font-size: 11.5px;
                padding: 4px 10px;
            }
            .catalog-header {
                flex-wrap: wrap;
                padding: 12px 16px;
                gap: 10px;
            }
            .catalog-header-instructions {
                order: 3;
                width: 100%;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
                padding-top: 6px;
                margin-top: 2px;
            }
            .header-instruction-item {
                font-size: 11.5px;
            }
        }

    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>

    <div class="app-container">
        <!-- SIMPLIFIED BRAND HERO HEADER (v61) -->
        <header class="catalog-brand-hero" id="catalog-brand-hero">
            <div class="brand-hero-inner">
                <div class="brand-logo-wrap">
                    <img src="assets/avf-logo.png" 
                         onerror="this.onerror=null; this.src='https://assets.zyrosite.com/cdn-cgi/image/format=auto,w=768,fit=crop/YNq2Qob540ikPKVx/avf-logo01-ec9GQS1gGRgVMRbb.png';" 
                         alt="Andean Valley Flowers" class="brand-logo-img">
                </div>
                <h1 class="brand-hero-title">Quote Real-Time Farm-Direct Availability</h1>
                <p class="brand-hero-sub-instruction"><i class="fa-solid fa-calendar-check"></i> Choose Incoterms & pick-up date, view real-time stock.</p>
            </div>
        </header>

        
        <div id="loading-overlay" class="loading-overlay">
            <div class="spinner"></div>
            <p>Submitting Request...</p>
        </div>

        <!-- Logistics Gatekeeper Modal Overlay -->
        <div id="logistics-modal-overlay" class="modal-overlay" style="display: none; align-items: center; justify-content: center; z-index: 1500; backdrop-filter: blur(5px);">
            <div class="filter-modal" style="max-width: 420px; width: 90%; text-align: center; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.2); border: 1px solid var(--border-color);">
                <h2 style="color: var(--primary-green); font-size: 22px; margin-bottom: 10px; font-weight: 700;">Select Logistics Terms</h2>
                <p style="font-size: 14px; color: var(--text-light); margin-bottom: 20px; line-height: 1.5;">To view real-time flower availability and accurate wholesale prices, please specify your shipment terms and date.</p>
                
                <div class="form-group" style="text-align: left;">
                    <label style="font-weight: 500; margin-bottom: 8px;">Incoterms *</label>
                    <select id="modal-incoterms" required onchange="toggleDoorDelInfoBanner(this.value)" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); font-size: 14px;">
                        <option value="" disabled selected>Select Shipping Terms</option>
                        <option value="FOB Quito">FOB Quito (Origin Airport)</option>
                        <option value="CIF MIA">Miami Warehouse Pick-Up</option>
                        <option value="DOOR DEL">Delivery to Destination</option>
                    </select>
                </div>
                <div id="door-del-info-banner" style="display:none; background: rgba(99, 102, 241, 0.12); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 8px; padding: 12px 14px; margin-top: -6px; margin-bottom: 16px; font-size: 13px; color: #a5b4fc; line-height: 1.45; text-align: left;">
                    🚚 <strong>Door-to-Door Service:</strong> Sourced from Miami warehouse stock. Pricing includes final-mile delivery directly to your destination.
                </div>
                
                <div class="form-group" style="text-align: left; margin-bottom: 25px;">
                    <label style="font-weight: 500; margin-bottom: 8px;">Requested Shipment Date *</label>
                    <input type="date" id="modal-delivery-date" required style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border-color); box-sizing: border-box; font-family: inherit; font-size: 14px;">
                    <small style="color: var(--text-light); display:block; margin-top:5px; font-size: 11px;">Same-day selection is allowed.</small>
                </div>
                
                <button id="modal-enter-catalog-btn" class="submit-btn" style="margin-top: 0; width: 100%;">View Catalog</button>
            </div>
        </div>

        <div id="screen-catalog" class="screen active">
            <div class="catalog-header">
                <div class="cart-container" id="cartContainer">
                    <i class="fa-solid fa-cart-shopping cart-icon"></i>
                    <span class="cart-badge" id="cartBadge">0</span>
                </div>
                
                <div class="catalog-header-instructions">
                    <div class="header-instruction-item"><i class="fa-solid fa-circle-info"></i> Press "Details" to see the stock available for any Variety.</div>
                    <div class="header-instruction-item"><i class="fa-solid fa-cart-shopping"></i> Add product boxes (variety/stem length), press shopping cart & submit request.</div>
                </div>

                <div class="catalog-title">
                    <h1>Andean Valley</h1>
                    <h2>Catalog</h2>
                </div>
            </div>
            <div class="search-filter-bar">
                <div class="search-input-wrapper">
                    <input type="text" id="searchInput" class="search-input" placeholder="Search...">
                    <button id="clearSearchBtn" class="clear-search-btn"><i class="fa-solid fa-times"></i></button>
                </div>
                <button id="filter-btn" class="filter-btn"><i class="fa-solid fa-filter"></i></button>
            </div>
            
            <!-- Offline Mode Warning Banner -->
            <div id="offline-warning-bar" style="display: none; background-color: #fff3cd; color: #856404; padding: 12px 25px; border-bottom: 1px solid #ffeeba; font-size: 13px; line-height: 1.4;">
                <i class="fa-solid fa-triangle-exclamation" style="margin-right: 8px;"></i>
                <strong>Warning:</strong> Could not connect to live inventory. Displaying offline catalog and saved cart quantities.
            </div>

            <!-- Logistics Summary Bar -->
            <div id="logistics-summary-bar" style="background-color: #f1f5f1; border-bottom: 1px solid var(--border-color); padding: 12px 25px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; font-size: 14px;">
                <span style="color: var(--text-dark); font-weight: 500;">
                    Logistics Sourcing: <span id="logistics-badge-incoterm" style="color: var(--primary-green); font-weight: 700;">FOB Miami</span> on <span id="logistics-badge-date" style="color: var(--primary-green); font-weight: 700;">-</span>
                </span>
                <button id="change-logistics-btn" style="background: none; border: none; color: var(--primary-green); font-weight: bold; cursor: pointer; text-decoration: underline; font-size: 14px; padding: 0;">[Change]</button>
            </div>

            <div id="product-list" class="product-list">
                </div>
            <button id="scrollToTopBtn" class="scroll-to-top-btn"><i class="fa-solid fa-arrow-up"></i></button>
        </div>

        <div id="screen-detail" class="screen">
            <header class="app-header">
                <div class="header-icon" id="detail-back-btn"><i class="fa-solid fa-arrow-left"></i></div>
                <h1 id="detail-header-title">Product Details</h1>
                <div></div> </header>
            <div class="detail-content">
                <div class="detail-top-grid">
                    <div class="detail-image-col">
                        <img id="detail-img" src="" alt="Rose Image" class="detail-main-image">
                        <div id="detail-img-placeholder" style="display: none;" class="detail-placeholder-box">Image Available Shortly</div>
                    </div>
                    
                    <div class="detail-info-col">
                        <div class="detail-header-compact">
                            <p id="detail-type" class="detail-type-name"></p>
                            <h1 id="detail-variety" class="detail-variety-name"></h1>
                        </div>

                        <div class="detail-specs-card">
                            <ul class="detail-list">
                                <li><span>Color Category</span><span id="detail-list-color"></span></li>
                                <li><span>Packaging</span><span>100 stems / box</span></li>
                            </ul>
                            <p id="detail-description" class="detail-description"></p>
                        </div>
                    </div>
                </div>

                <div class="detail-controls-container" style="margin-top: 18px;">
                    <h2 style="font-size: 15px; font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border-color); padding-bottom: 6px; margin: 0 0 10px 0;">Order by Stem Length (100 stems/box)</h2>
                    <div id="detail-stems-list" style="display: flex; flex-direction: column; gap: 8px;">
                        <!-- Dynamically populated variety details by stem length -->
                    </div>
                    <div id="detail-out-of-stock-note" style="margin-top: 12px; font-size: 13px; color: #1565c0; font-weight: 500; font-style: italic; display: none;">
                        *Request a Quote and we will get back to you shortly
                    </div>
                </div>

                <button id="detail-add-to-quote-btn" class="submit-btn" style="margin-top: 18px; padding: 12px; font-size: 15px; background-color: var(--primary-green);">Back to Catalog</button>
            </div>
        </div>
        
        <div id="screen-review" class="screen">
             <header class="app-header">
                <h1>Review</h1>
                <div style="display:flex; align-items:center;">
                    <button id="clear-cart-header-btn" class="header-action-btn" title="Start New Quote"><i class="fa-solid fa-trash-can"></i> New</button>
                    <div class="header-icon" id="summary-close-btn" style="margin-left:15px;"><i class="fa-solid fa-times"></i></div>
                </div>
            </header>
            <div class="summary-content">
                <h2 id="summary-items-title">Selected Items (0)</h2>
                <div id="summary-item-list" class="summary-item-list">
                    </div>
                
                <div class="summary-totals" style="border-bottom: 2px solid var(--primary-green); padding-bottom: 15px; margin-bottom: 20px;">
                    <h2>Quote Summary</h2>
                    <div style="display: flex; justify-content: space-between; gap: 20px;">
                        <div style="flex: 1;">
                            <div class="total-line"><span>Total Varieties:</span><span id="summary-total-varieties">0</span></div>
                            <div class="total-line"><span>Total Boxes:</span><span id="summary-total-boxes">0</span></div>
                            <div class="total-line"><span>Total Stem Lengths:</span><span id="summary-total-stem-lengths">0</span></div>
                            <div class="total-line"><span>Estimated Volume:</span><span id="summary-estimated-volume">0 stems</span></div>
                        </div>
                        <div style="flex: 1; border-left: 2px solid var(--primary-green); padding-left: 20px;">
                            <div class="total-line"><span>Total in-stock:</span><span id="summary-total-in-stock">0</span></div>
                            <div class="total-line"><span>Total not in-stock:</span><span id="summary-total-not-in-stock">0</span></div>
                        </div>
                    </div>
                </div>

                <div id="moq-alert-container"></div>
                
                <form id="quote-form">
                    <h2 style="margin-top: 30px;">Business Information (required)</h2>
                    
                    <!-- Hidden inputs for pre-selected logistics terms -->
                    <input type="hidden" id="delivery-date">
                    <input type="hidden" id="incoterms">

                    <!-- Mandatory Contact Information (2x2 Grid) -->
                    <div class="form-group split">
                        <div><label for="contact-name">Contact Name / Title *</label><input type="text" id="contact-name" required></div>
                        <div><label for="company-name">Company Name *</label><input type="text" id="company-name" required></div>
                    </div>

                    <div class="form-group split">
                        <div><label for="billing-email">Billing Email *</label><input type="email" id="billing-email" required></div>
                        <div><label for="phone">Phone *</label><input type="tel" id="phone" required placeholder="+123456789"></div>
                    </div>

                    <!-- Customer Segment Classification (Mandatory) -->
                    <div class="form-group" style="background: #f8faf8; padding: 14px 16px; border-radius: 8px; border: 1px solid #e2ece2; margin-bottom: 15px; margin-top: 5px;">
                        <label style="font-weight: bold; color: #4A6A4A; display: block; margin-bottom: 10px; font-size: 13px;">Account / Buyer Classification *</label>
                        <div style="display: flex; flex-direction: column; gap: 10px;">
                            <label style="font-weight: normal; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #333; margin: 0;">
                                <input type="radio" name="client-segment" id="segment-commercial" value="COMMERCIAL" checked style="width: auto; margin: 0; flex-shrink: 0;">
                                <span><strong>I am interested in buying wholesale flowers for use</strong> (Commercial / End-User, No Resale Certificate)</span>
                            </label>
                            <label style="font-weight: normal; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; color: #333; margin: 0;">
                                <input type="radio" name="client-segment" id="segment-reseller" value="WHOLESALE" style="width: auto; margin: 0; flex-shrink: 0;">
                                <span><strong>I am a floral reseller</strong> and have a Resale Certificate Number</span>
                            </label>
                        </div>
                    </div>

                    <!-- Dynamic Reseller Minimum Order Warning -->
                    <div id="reseller-moq-warning" style="display: none; background-color: #ffebee; border: 1px solid #ef5350; color: #c62828; padding: 10px 12px; border-radius: 6px; font-size: 12px; margin-bottom: 15px; font-weight: 500;">
                        * Wholesale Reseller pricing requires a minimum order of 5 boxes. To order less than 5 boxes, please select the Commercial End-User option above.
                    </div>

                    <!-- Billing Address Section (Optional) -->
                    <div style="margin-top: 15px; margin-bottom: 15px;">
                        <h3 style="font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 10px;">Billing Address (Optional)</h3>
                        <div class="form-group">
                            <label for="billing-street">Street Address</label>
                            <input type="text" id="billing-street">
                        </div>
                        <div class="form-group triple">
                            <div>
                                <label for="billing-city">City</label>
                                <input type="text" id="billing-city">
                            </div>
                            <div>
                                <label for="billing-state">State</label>
                                <select id="billing-state">
                                    <option value="">Select State</option>
                                    <option value="AL">Alabama</option>
                                    <option value="AK">Alaska</option>
                                    <option value="AZ">Arizona</option>
                                    <option value="AR">Arkansas</option>
                                    <option value="CA">California</option>
                                    <option value="CO">Colorado</option>
                                    <option value="CT">Connecticut</option>
                                    <option value="DE">Delaware</option>
                                    <option value="DC">District Of Columbia</option>
                                    <option value="FL">Florida</option>
                                    <option value="GA">Georgia</option>
                                    <option value="HI">Hawaii</option>
                                    <option value="ID">Idaho</option>
                                    <option value="IL">Illinois</option>
                                    <option value="IN">Indiana</option>
                                    <option value="IA">Iowa</option>
                                    <option value="KS">Kansas</option>
                                    <option value="KY">Kentucky</option>
                                    <option value="LA">Louisiana</option>
                                    <option value="ME">Maine</option>
                                    <option value="MD">Maryland</option>
                                    <option value="MA">Massachusetts</option>
                                    <option value="MI">Michigan</option>
                                    <option value="MN">Minnesota</option>
                                    <option value="MS">Mississippi</option>
                                    <option value="MO">Missouri</option>
                                    <option value="MT">Montana</option>
                                    <option value="NE">Nebraska</option>
                                    <option value="NV">Nevada</option>
                                    <option value="NH">New Hampshire</option>
                                    <option value="NJ">New Jersey</option>
                                    <option value="NM">New Mexico</option>
                                    <option value="NY">New York</option>
                                    <option value="NC">North Carolina</option>
                                    <option value="ND">North Dakota</option>
                                    <option value="OH">Ohio</option>
                                    <option value="OK">Oklahoma</option>
                                    <option value="OR">Oregon</option>
                                    <option value="PA">Pennsylvania</option>
                                    <option value="RI">Rhode Island</option>
                                    <option value="SC">South Carolina</option>
                                    <option value="SD">South Dakota</option>
                                    <option value="TN">Tennessee</option>
                                    <option value="TX">Texas</option>
                                    <option value="UT">Utah</option>
                                    <option value="VT">Vermont</option>
                                    <option value="VA">Virginia</option>
                                    <option value="WA">Washington</option>
                                    <option value="WV">West Virginia</option>
                                    <option value="WI">Wisconsin</option>
                                    <option value="WY">Wyoming</option>
                                </select>
                            </div>
                            <div>
                                <label for="billing-zip">ZIP Code</label>
                                <input type="text" id="billing-zip" pattern="\d{5}(-\d{4})?">
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="client-notes">Notes/Instructions/Requests/Shipping Address</label>
                        <textarea id="client-notes" rows="2" placeholder="Any special instructions..."></textarea>
                    </div>

                    <div class="terms-group">
                        <input type="checkbox" id="terms" required>
                        <label for="terms">I accept the <a href="#" target="_blank" id="terms-link">commercial terms and conditions</a></label>
                    </div>

                    <div class="form-group submit-actions">
                        <button id="submit-quote-request-btn" class="submit-btn" type="submit" disabled>Submit Request</button>
                    </div>

                    <!-- Tax Exemption / Resale Certificate Section BELOW Submit Button -->
                    <div style="margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-color);">
                        <h3 style="font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 12px;">Sales Tax Exemption / Resale Certificate (Optional)</h3>
                        <div class="form-group split">
                            <div>
                                <label for="vat-tax">Sales Tax Exemption / Resale Certificate Number</label>
                                <input type="text" id="vat-tax">
                            </div>
                            <div id="resale-file-group">
                                <label for="resale-file">Upload Resale Certificate (PDF or Image)</label>
                                <input type="file" id="resale-file" accept="application/pdf,image/*">
                            </div>
                        </div>
                        <div class="terms-group" style="margin-bottom: 10px;">
                            <input type="checkbox" id="resale-file-on-file">
                            <label for="resale-file-on-file" style="font-weight: normal; margin-bottom: 0;">I have already submitted my Resale Certificate on file</label>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div id="filter-modal-overlay" class="modal-overlay">
            <div class="filter-modal">
                <h2>Filter Varieties</h2>
                <div id="filter-options-container"></div>
                <div class="modal-actions">
                    <button id="clear-filters-btn" class="modal-btn">Clear</button>
                    <button id="apply-filters-btn" class="modal-btn btn-apply">Apply</button>
                </div>
            </div>
        </div>

    </div>

    <script>

    // =========================================================================
    // ANDEAN VALLEY CATALOG TELEMETRY & VISITOR INTELLIGENCE (v61)
    // =========================================================================
    const _catUrlParams = new URLSearchParams(window.location.search);
    const _catCid = _catUrlParams.get('cid') || _catUrlParams.get('clientId') || localStorage.getItem('avf_client_id') || '';
    const _catRep = _catUrlParams.get('rep') || '';
    const _catUtm = _catUrlParams.get('utm_source') || '';
    let _catReferrer = 'Direct';
    try {
      if (document.referrer) {
        _catReferrer = new URL(document.referrer).hostname || document.referrer;
      } else if (_catUtm) {
        _catReferrer = _catUtm;
      }
    } catch(e) { _catReferrer = 'Direct'; }
    
    if (_catCid) {
      try { localStorage.setItem('avf_client_id', _catCid); } catch(e) {}
    }
    
    const _catIsMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    let _catSessionId = '';
    let _catIsNewSession = false;
    try {
      _catSessionId = sessionStorage.getItem('avf_cat_session_id');
      if (!_catSessionId) {
        _catIsNewSession = true;
        _catSessionId = 'sess_' + Math.random().toString(36).substring(2, 10);
        sessionStorage.setItem('avf_cat_session_id', _catSessionId);
      }
    } catch(e) { _catIsNewSession = true; }

    function sendCatalogBeacon(eventType, extraData = {}) {
      try {
        const payload = {
          action: 'trackCatalogActivity',
          eventType: eventType,
          clientId: _catCid,
          salespersonId: _catRep,
          incoterm: (typeof selectedIncoterm !== 'undefined' ? selectedIncoterm : 'FOB MIA') || 'FOB MIA',
          deliveryDate: (typeof selectedDate !== 'undefined' ? selectedDate : '') || '',
          device: _catIsMobile ? 'Mobile' : 'Desktop',
          referrer: _catReferrer,
          isNewSession: _catIsNewSession,
          cartSummary: extraData.cartSummary || '',
          timestamp: new Date().toISOString()
        };
        _catIsNewSession = false; // only first hit counts as new session

        const targetUrl = GOOGLE_SCRIPT_URL + (GOOGLE_SCRIPT_URL.includes('?') ? '&' : '?') + 'action=trackCatalogActivity';
        if (navigator.sendBeacon) {
          const blob = new Blob([JSON.stringify(payload)], { type: 'text/plain;charset=UTF-8' });
          navigator.sendBeacon(targetUrl, blob);
        } else {
          fetch(targetUrl, {
            method: 'POST',
            mode: 'no-cors',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
          }).catch(() => {});
        }
      } catch(e) {}
    }

    document.addEventListener('DOMContentLoaded', () => {

        // --- 1. CONFIGURATION ---
        // PASTE YOUR DEPLOYED GOOGLE SCRIPT URL HERE (Replace ONLY this line)
        const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbyvCoLzZpO6NqrYs6LKonZRLAjqeDnpm-WbuVGFVBuunQ-QXA0SOElF-GdFRBMP2vP8/exec"; 
        
        const STEMS_PER_BOX = 100;
        const MOQ_TOTAL_BOXES = 5;
        const TERMS_URL = "https://andeanvalleyflowers.com/terms-and-conditions";
        const WHATSAPP_NUMBER = "593999956888"; 
        const USER_DATA_KEY = 'andeanValleyUserInfo'; 
        const CART_DATA_KEY = 'andeanValleyCart';

        // ── FEATURE FLAG: DELIVERY TO DESTINATION ──────────────────────────────
        // Set to true to re-enable the 'Delivery to Destination' Incoterm option.
        // All underlying DOOR DEL logic (MOQ rules, info banner, pricing tiers)
        // is fully preserved. This flag only controls UI visibility.
        const DOOR_DEL_ENABLED = false;
        // ───────────────────────────────────────────────────────────────────────      

        // COMPLETE 101 PRODUCT LIST (Fixed Image URLs for Varieties reporting load errors)
        const PRODUCTS = [
            { id: "ROS-ABSOLUTINPINK", variety: "ABSOLUT IN PINK", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A captivating bicolor rose with soft pink petals and a unique mint-green edge.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/dfd5087d-0f96-4818-9d68-9aec23742fec.png" },
            { id: "ROS-AKITO", variety: "AKITO", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60], description: "A crisp white rose known for its purity and elegant simplicity.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/daf0a141-bd17-4290-90fc-5caa4c51669a.png" },
            { id: "ROS-ALOHA", variety: "ALOHA", colorCategory: "ORANGE", type: "Rose", stemLengths: [40, 50, 60], description: "A cheerful orange rose that radiates warmth and tropical charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/21ab90f0-9547-4f6f-86e1-001f7ddb2dc6.png" },
            { id: "ROS-ALTAMIRA", variety: "ALTAMIRA", colorCategory: "RED", type: "Rose", stemLengths: [40, 50, 60], description: "A deep, high-petal count red rose known for its velvet texture and durability.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/1fa087a9-ed89-4a49-9f9a-579bfc614409.png" },
            { id: "ROS-ALY", variety: "ALY", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50], description: "A soft pink rose with a delicate look, perfect for romantic arrangements.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/60206e08-6ab6-42de-9db1-0e437db78f84.png" },
            { id: "ROS-AMNESIA", variety: "AMNESIA", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60], description: "A muted lavender-gray rose with a vintage, mysterious appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/5b2e6eee-e045-4fa2-9bcf-be687cd2e0ab.png" },
            { id: "GDR-ANTONIA", variety: "ANTONIA", colorCategory: "CREAM", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A lush cream garden rose with yellow center and ruffled layered petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/049ebd09-7467-4860-b07d-073d49c02d96.png" },
            { id: "GDR-AURORA", variety: "AURORA", colorCategory: "WHITE", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A creamy white garden rose that evokes serenity and refinement.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/963f114e-b3b5-4859-b35d-8ac896f3e489.jpg" },
            { id: "ROS-BABALOO", variety: "BABALOO", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A vibrant pinkish-lavender bloom that opens into a lush, full-bodied flower.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/a2a23fae-4efc-4aad-9c06-9971edbc3187.png" },
            { id: "ROS-BARISTA", variety: "BARISTA", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60], description: "A rich-toned novelty rose with caf -inspired hues and modern flair.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/31ef8bf4-607c-46aa-89f6-642221daa424.png" },
            { id: "ROS-BESWEET", variety: "BE SWEET", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A vibrant pink rose with a playful name and sweet visual impact.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f06414b8-9403-4b7c-b5f0-cd3495c05585.png" },
            { id: "ROS-BIKINI", variety: "BIKINI", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60], description: "A bright, sunny yellow rose with large heads and excellent opening consistency.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/515e00b1-3c44-4136-a766-f27f4baf560b.png" },
            { id: "ROS-BLACKBACCARA", variety: "BLACK BACCARA", colorCategory: "RED", type: "Rose", stemLengths: [50, 60, 70, 80, 90], description: "A deep, velvety red rose with dramatic elegance and intensity.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f851773e-c043-4f63-b6de-120118cd044d.png" },
            { id: "ROS-BLACKMAGIC", variety: "BLACK MAGIC", colorCategory: "RED", type: "Rose", stemLengths: [50, 60, 70], description: "A bold red rose with long-lasting petals and classic allure.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/118df800-1d16-478d-9c19-e1ead0b9ecf7.png" },
            { id: "ROS-BLUEBERRY", variety: "BLUEBERRY", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A lavender rose with cool undertones and a fresh, fruity name.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/eebb55d8-dacc-4171-a19c-fc19072e372c.png" },
            { id: "ROS-BLUSH", variety: "BLUSH", colorCategory: "BICOLOR", type: "Rose", stemLengths: [50, 60, 70], description: "A soft bicolor rose with gentle pink and cream tones that evoke tenderness.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/15c7bd70-4fdd-493d-ab28-6e14d88fb863.png" },
            { id: "ROS-BREATHLESS", variety: "BREATHLESS", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A romantic pink rose with a name that suggests awe and beauty.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/41776426-5449-461b-b35b-4991759df5e9.png" },
            { id: "ROS-BRIGHTON", variety: "BRIGHTON", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A bright yellow rose that brings sunshine and cheer to any bouquet.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/a68e53e6-9035-4c01-add7-bdd3207c9dbb.png" },
            { id: "ROS-BUMBLEBEE", variety: "BUMBLEBEE", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60], description: "A standout mustard-yellow variety with a warm, golden tone perfect for autumn.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/ab753307-1d65-4ef7-a9ba-bc5e258838de.png" },
            { id: "ROS-CABARET", variety: "CABARET", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A fiery bicolor with a creamy-white base and intense orange-red tips.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/ecb15f35-0168-484c-a595-a730fefc47db.png" },
            { id: "ROS-CANDLELIGHT", variety: "CANDLELIGHT", colorCategory: "CREAM", type: "Rose", stemLengths: [50, 60, 70], description: "A creamy rose with garden-style fullness and a soft glow.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY%2Fassets%2F6bb3b525-7129-44ca-844f-0c8821f1a61a.webp" },
            { id: "ROS-CANDYXPRESSION", variety: "CANDY X-PRESSION", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A vivid pink rose with expressive petals and playful energy.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY%2Fassets%2F5311e615-c47d-412f-9508-5fec6ba2d27a.webp" },
            { id: "ROS-CARNELIAN", variety: "CARNELIAN", colorCategory: "ORANGE", type: "Rose", stemLengths: [40, 50, 60], description: "A vibrant orange rose reminiscent of summer and vitality.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/82db6f5e-eafe-4b2d-9393-ce72f44b4fbf.png" },
            { id: "ROS-CAROUSEL", variety: "CAROUSEL", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A classic bicolor featuring pure white petals with delicate deep pink edges.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/3ce9c9dc-fb12-4d0f-a050-a7a204f9b625.png" },
            { id: "ROS-CHAMPAGNE", variety: "CHAMPAGNE", colorCategory: "CREAM", type: "Rose", stemLengths: [40, 50, 60], description: "A soft cream rose with understated elegance and celebratory charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/86e43201-87af-4647-aebb-4b77af6194d6.png" },
            { id: "ROS-CHERRYBRANDY", variety: "CHERRY BRANDY", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A striking bicolor rose with cherry and amber tones, rich and festive.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/1b15a83f-fbda-442d-9e73-1e06c8bc2cab.png" },
            { id: "ROS-CHRISTA", variety: "CHRISTA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A gentle pink rose with classic form and feminine grace.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/4b032b66-9939-4e72-80d9-957672818402.jpg" },
            { id: "ROS-COLDBREW", variety: "COLD BREW", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A trendy bicolor rose with earthy tones and a modern twist.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/41374b1d-e573-4119-8e52-7e9158191674.jpg" },
            { id: "ROS-COOLWATER", variety: "COOLWATER", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A refreshing lavender rose with cool hues and calming presence.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/020f69c2-12c2-4a4f-92b1-61795740081e.png" },
            { id: "ROS-CORALREEF", variety: "CORAL REEF", colorCategory: "PEACH", type: "Rose", stemLengths: [40, 50, 60], description: "A peach-toned rose with coral vibrancy and tropical depth.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY%2Fassets%2F9fe0d360-eee9-4ba6-b993-2900c3143e41.webp" },
            { id: "GDR-COTTONXPRESSION", variety: "COTTON X-PRESSION", colorCategory: "WHITE", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A fluffy white garden rose with expressive petals and soft texture.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY%2Fassets%2Fc37ed571-e531-4157-a4c3-f86a7dee3057.webp" },
            { id: "GDR-COUNTRYBLUES", variety: "COUNTRY BLUES", colorCategory: "LAVENDER", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A lavender garden rose with rustic charm and soulful color.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/db42240f-4102-4cff-8a17-d00d3093cdb4.png" },
            { id: "GDR-COUNTRYCANDY", variety: "COUNTRY CANDY", colorCategory: "BICOLOR", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A playful cream rose with vivid red-pink ruffles that add depth and movement.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/312b091c-45ad-489c-af3c-59e5d42b777d.png" },
            { id: "GDR-COUNTRYSECRET", variety: "COUNTRY SECRET", colorCategory: "NOVELTY", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A unique garden rose with secretive tones and layered petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/36c1b191-a933-4700-8334-4eee9239ca0e.png" },
            { id: "ROS-CRAZYDIAMOND", variety: "CRAZY DIAMOND", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A striking pink and cream rose with large, high-centered blooms.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/5099b3a0-5302-44b5-ac23-788fd4061f15.png" },
            { id: "ROS-CREAMSHIMMER", variety: "CREAM SHIMMER", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60], description: "A shimmering white rose with a subtle glow and refined beauty.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY%2Fassets%2F24417c1d-a743-475b-ae9f-e5a818915607.png" },
            { id: "ROS-CREMEDELACREME", variety: "CREME DE LA CREME", colorCategory: "CREAM", type: "Rose", stemLengths: [40, 50, 60], description: "A luxurious cream rose with premium texture and elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/b185c748-e95f-46ec-be2d-29f3c3159110.png" },
            { id: "GDR-DARKCROWN", variety: "DARK CROWN", colorCategory: "HOT PINK", type: "Garden Rose", stemLengths: [40, 50, 60], description: "An exotic, garden-style rose in deep pink-fuchsia with a distinctive \"crown\" shape.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f4be4951-9d65-4fd1-b663-dc7f103f2b2b.png" },
            { id: "ROS-DEEPPURPLE", variety: "DEEP PURPLE", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A dramatic bicolor rose with rich purple and cream contrasts.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/661dd7ae-9a2d-46b4-ba75-16254fd92a67.png" },
            { id: "GDR-DRAGONFLY", variety: "DRAGONFLY", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A peach garden rose featuring a rare, vibrant green center.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/335d476c-ad5c-4186-80c6-6586d07bcc37.png" },
            { id: "ROS-DYNAMIC", variety: "DYNAMIC", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60], description: "A unique sandy-green novelty variety with high resistance and a modern look.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/0393373f-160a-46b4-8ff9-00177f690ed0.png" },
            { id: "ROS-ESKIMO", variety: "ESKIMO", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60], description: "A pure, snowy white rose with a focus on refined grace and clear petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2946589f-0598-409a-9cd9-d7cd1559b81a.png" },
            { id: "ROS-ESPERANCE", variety: "ESPERANCE", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A soft pink and green bicolor rose with vintage charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/90616ebc-7e0e-4523-824f-cf3139c0caa0.png" },
            { id: "ROS-EXPLORER", variety: "EXPLORER", colorCategory: "RED", type: "Rose", stemLengths: [40, 50, 60, 70, 80, 90], description: "A bold red rose with adventurous spirit and long stems.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/8e5739c3-7c27-4521-b76b-d0920e527a2c.jpg" },
            { id: "ROS-FAITH", variety: "FAITH", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50], description: "A gentle pink rose that symbolizes trust and grace.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/d03d34c1-b924-4317-8608-d1a6b66a2552.webp" },
            { id: "GDR-FASCINATION", variety: "FASCINATION", colorCategory: "PINK", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A romantic blend of soft peach/pink hues with beautifully layered petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/e02ade40-007b-4691-a083-de31cbdadada.png" },
            { id: "GDR-FELICITY", variety: "FELICITY", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A peach garden rose with joyful tones and lush petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/eb868d6c-46d7-492b-8565-9440e0f5c5c3.webp" },
            { id: "GDR-FREESPIRIT", variety: "FREE SPIRIT", colorCategory: "ORANGE", type: "Garden Rose", stemLengths: [40, 50], description: "A wild orange garden rose with ruffled petals and vibrant energy.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/bc8e4138-1c97-4b58-b73e-db1c9fecc506.png" },
            { id: "ROS-FREEDOM", variety: "FREEDOM", colorCategory: "RED", type: "Rose", stemLengths: [40, 50, 60, 70], description: "The classic bold, long-lasting red rose that portrays love and romance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/36b82217-980c-4868-83c0-62a592e91411.png" },
            { id: "ROS-FRUTETTO", variety: "FRUTETTO", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50], description: "A fruity-toned bicolor rose with playful color transitions.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/074d7826-8954-4178-a0d4-b5b14e0bd890.png" },
            { id: "ROS-FULLMONTY", variety: "FULL MONTY", colorCategory: "HOT PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A hot pink rose with bold personality and striking presence.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/4f378da6-be5a-439a-9786-c3b7f3de3189.png" },
            { id: "ROS-GOLDFINCH", variety: "GOLDFINCH", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60], description: "A cheerful yellow rose with golden tones and lively charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/131e6e85-5c85-4e9d-b9bd-c81e02c4b21b.png" },
            { id: "ROS-GOVINDA", variety: "GOVINDA", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A lavender rose with spiritual undertones and serene beauty.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/a30ddc1f-f7d2-40ac-be74-bfb7fa0e6561.png" },
            { id: "GDR-HEARTS", variety: "HEARTS", colorCategory: "RED", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A red garden rose with heart-shaped petals and romantic depth.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/0af04061-527a-49de-867a-3bab929c3047.jpg" },
            { id: "ROS-HERMOSA", variety: "HERMOSA", colorCategory: "PINK", type: "Rose", stemLengths: [50, 60, 70, 80], description: "A classic pink rose with timeless beauty and generous bloom.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/7362a892-ef0b-4615-99ae-2f6f73ff2689.jpg" },
            { id: "ROS-HIGHEXOTIC", variety: "HIGH EXOTIC", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A vibrant yellow rose with exotic flair and bold structure.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/1e1987e6-ce11-4fd4-b0ea-2e8e4c20a1dd.jpg" },
            { id: "ROS-HIGHMAGIC", variety: "HIGH MAGIC", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A bold bicolor variety with a yellow base and dramatic fiery red-orange tips.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/b6183e13-2097-401f-a3b3-864f43ea1fa5.png" },
            { id: "ROS-HIGHYELLOWMAGIC", variety: "HIGH YELLOW MAGIC", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50], description: "A bright golden yellow rose featuring precise red edging on the outer petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/71c0c177-1faa-4004-a953-d5b4e1c6b71e.png" },
            { id: "ROS-INTENSE", variety: "INTENSE", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50], description: "A bright orange/yellow rose that offers a vibrant, energetic visual impact.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/7b7ed768-97a1-4b49-89c7-b50093df0081.png" },
            { id: "ROS-JESSIKA", variety: "JESSIKA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A soft pink rose with youthful charm and gentle curves.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/52ecdcf3-a75d-425f-bdd5-bb6ad2ff4c12.jpg" },
            { id: "GDR-JOURNEY", variety: "JOURNEY", colorCategory: "BICOLOR", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A bold novelty bicolor shifting from lime-yellow to vibrant red-pink edges.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f9aba2cd-1b32-409b-9a84-c2ae4a1e217c.png" },
            { id: "GDR-KAHALA", variety: "KAHALA", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [50, 60, 70], description: "A peach rose with tropical richness and layered petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/27ee5646-a26a-4126-9b6c-d741c8ce700e.png" },
            { id: "ROS-KERIO", variety: "KERIO", colorCategory: "YELLOW", type: "Rose", stemLengths: [50, 60, 70], description: "A bright yellow rose with strong stems and vivid color.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/813f07ac-715c-4227-a4df-a670ac080e8e.jpg" },
            { id: "GDR-KINGSCROSS", variety: "KING'S CROSS", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A regal peach garden rose with full blooms and stately elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/74a9001f-f2bf-4b52-8d13-171f624165e8.jpg" },
            { id: "ROS-LEMONADE", variety: "LEMONADE", colorCategory: "GREEN", type: "Rose", stemLengths: [40, 50, 60], description: "A fresh green rose with citrus-inspired tones and crisp appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/6f675641-057a-4a2a-891f-071b00160d5a.png" },
            { id: "ROS-LOLA", variety: "LOLA", colorCategory: "HOT PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A hot pink rose with bold flair and playful attitude.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/aa4713c0-5b31-44b2-9873-702300f940e3.png" },
            { id: "ROS-MAGICTIMES", variety: "MAGIC TIMES", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A whimsical bicolor rose with enchanting color shifts.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/db8b1ecf-4605-46ee-b0c1-ed812060e0e3.png" },
            { id: "ROS-MALIBU", variety: "MALIBU", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A beachy bicolor rose with sunset tones and relaxed elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2f8e035a-d093-4aab-b1b7-981beef740c0.png" },
            { id: "ROS-MANDALA", variety: "MANDALA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A soft pink rose with harmonious petals and gentle elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/3e34f1bc-ca7e-4c9d-b8ee-c8ab28ed8370.png" },
            { id: "GDR-MANDARINXPRESSION", variety: "MANDARIN X-PRESSION", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A peach garden rose with expressive tones and citrus warmth.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f49efe09-ad74-4e52-aff4-3e108350c2bd.png" },
            { id: "ROS-MENTA", variety: "MENTA", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60], description: "A cool-toned novelty rose with minty undertones and modern appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2b4413b5-5e5c-4d07-ac72-4c0b64800452.jpg" },
            { id: "ROS-MONDIAL", variety: "MONDIAL", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A pristine white rose with classic form and long-lasting freshness.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/00d33cb7-8770-4255-bcd6-b991c29aef24.png" },
            { id: "ROS-MOODYBLUES", variety: "MOODY BLUES", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60, 70, 80], description: "A lavender rose with rich tones and a soulful, dramatic flair.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/82e6bf34-a412-489a-89cf-fc37c8be0342.png" },
            { id: "GDR-MOONSTONE", variety: "MOONSTONE", colorCategory: "CREAM", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A creamy garden rose with luminous petals and refined beauty.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/01b157e2-dc83-47a1-a8e6-0176c62e075f.png" },
            { id: "ROS-MOTHEROFPEARL", variety: "MOTHER OF PEARL", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A delicate pink rose with pearlescent glow and graceful charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/aa4fdef5-7700-4510-9924-05f0f0966479.png" },
            { id: "ROS-NAUTICA", variety: "NAUTICA", colorCategory: "PINK", type: "Rose", stemLengths: [50, 60, 70], description: "A bold pink rose with nautical inspiration and vibrant energy.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/fbf87f57-18c2-44f5-8e89-bcbd1b53ff51.png" },
            { id: "ROS-NENA", variety: "NENA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50], description: "A playful bicolor rose with soft pink and cream transitions.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/89c49ac5-7062-464d-a7f1-64b56a6b7295.jpg" },
            { id: "ROS-NEWSFLASH", variety: "NEWSFLASH", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A striking bicolor rose with vivid contrast and headline-worthy appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/0c8aba6a-e3e9-4323-a0e8-bf24419496e2.webp" },
            { id: "ROS-NINA", variety: "NINA", colorCategory: "ORANGE", type: "Rose", stemLengths: [50, 60, 70], description: "A bright orange rose with fiery tones and cheerful personality.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/e20bd675-f623-4b3c-8011-99fa3f0fe559.png" },
            { id: "ROS-NOVIA", variety: "NOVIA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A romantic pink & light-pink rose with bridal elegance and soft hues.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/64211faa-6b7a-4699-bc7c-2881c76a24c4.png" },
            { id: "ROS-OCEANSONG", variety: "OCEAN SONG", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A lavender rose with cool, flowing tones and serene beauty.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f72d7355-ad51-4187-b07b-84cd0cb974dc.png" },
            { id: "GDR-OHARA", variety: "OHARA", colorCategory: "PINK", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A lush pink garden rose with full blooms and romantic fragrance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/3d3b1b29-5875-41a8-b7fe-31368f7c613a.png" },
            { id: "ROS-OPALA", variety: "OPALA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A refined pink rose with gem-like clarity and soft curves.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/dc2d4d03-c881-4f68-a175-1b526f37da93.png" },
            { id: "ROS-ORANGECRUSH", variety: "ORANGE CRUSH", colorCategory: "ORANGE", type: "Rose", stemLengths: [40, 50, 60], description: "A vivid orange rose with bold petals and energetic charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f297b954-a692-411d-985e-fabbe78c3b4d.png" },
            { id: "ROS-PALOMA", variety: "PALOMA", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50], description: "A gentle bicolor rose with dove-like softness and peaceful tones.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/32418f47-e4e7-4605-8393-0fb7671baf46.webp" },
            { id: "GDR-PHOENIX", variety: "PHOENIX", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [50, 60, 70], description: "A peach garden rose with rising warmth and layered elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/261c8bb0-9aae-4e59-8ea1-34454f6dc180.png" },
            { id: "ROS-PINKCANDY", variety: "PINK CANDY", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A sweet pink rose with playful tones and youthful appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f282b056-2329-4902-bdfe-0643a99f7643.jpg" },
            { id: "ROS-PINKFLOYD", variety: "PINK FLOYD", colorCategory: "HOT PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A bold hot pink rose with rockstar vibrance and dramatic flair.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/44afdb12-4bd0-4108-8c63-4ae9e1667f53.png" },
            { id: "ROS-PINKMONDIAL", variety: "PINK MONDIAL", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A classic pink rose with Mondial lineage and timeless beauty.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/5277bf9f-1995-400c-8c8c-a3dc53f1ff71.webp" },
            { id: "GDR-PINKXPRESSION", variety: "PINK X-PRESSION", colorCategory: "PINK", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A garden-style pink rose with expressive petals and soft texture.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/505961a0-a079-471a-842b-a7395b0acce4.png" },
            { id: "ROS-PLAYABLANCA", variety: "PLAYA BLANCA", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A crisp white rose with beach-inspired purity and clean lines.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/0ab6194b-4800-43cc-af02-9eb6d4bde039.png" },
            { id: "ROS-POLARSTAR", variety: "POLAR STAR", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60], description: "A radiant white rose with icy brilliance and stellar form.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/cfe34188-bfde-4974-8150-dbde504c065a.png" },
            { id: "ROS-POMAROSA", variety: "POMAROSA", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A delicate light pink rose that brings a touch of elegance and romantic charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/7e0f6f8e-eed6-4cac-95f6-e538bb790bca.png" },
            { id: "ROS-POMPEII", variety: "POMPEII", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A dramatic novelty rose with volcanic tones and bold structure.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f2134a2e-31bb-4041-a74f-ca63d6441bbd.jpg" },
            { id: "GDR-PRINCESSCROWN", variety: "PRINCESS CROWN", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A regal peach garden rose with layered petals and royal elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2658a247-5236-4d5e-a092-26cb71b756f3.png" },
            { id: "ROS-PRIORITY", variety: "PRIORITY", colorCategory: "CREAM", type: "Rose", stemLengths: [40, 50, 60], description: "A sophisticated cream variety with a subtle pink blush at its center.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/6b75c6c6-fce4-4cc4-a72c-f0762dd2d813.png" },
            { id: "ROS-PROUD", variety: "PROUD", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A stately white rose with upright form and dignified presence.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/099e69f0-9022-431d-a0bb-e6746dbf09b4.webp" },
            { id: "ROS-PURPLEMOON", variety: "PURPLE MOON", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A lavender rose with ombr  petals and celestial charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/7edddc6f-d1db-4e3d-adc7-604a3671d2b5.jpg" },
            { id: "GDR-QUEENSCROWN", variety: "QUEENS CROWN", colorCategory: "LAVENDER", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A lavender-pink garden rose with ruffled petals and large heads.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/4582707d-a82f-4a3d-95cc-87d19df5d953.png" },
            { id: "ROS-QUICKSAND", variety: "QUICKSAND", colorCategory: "PEACH", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A muted peach rose with sandy undertones and subtle sophistication.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/e0fc5e12-6fba-4378-9d66-7f6f6f791232.jpg" },
            { id: "ROS-RHOSLYN", variety: "RHOSLYN", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A classic pink rose with high-centered buds and exceptionally lush greenery.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/fc2853bf-8fec-4e52-9884-7e3829ddd669.png" },
            { id: "GDR-SAGA", variety: "SAGA", colorCategory: "PINK", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A pink garden rose with storytelling beauty and layered petals.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/3532c960-8bab-4503-9922-55a76009a4d1.png" },
            { id: "ROS-SAHARA", variety: "SAHARA", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60], description: "A warm-toned novelty rose with desert-inspired hues and rustic charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/b742120a-ed46-452b-a503-106e6c8362c7.jpg" },
            { id: "ROS-SANDY", variety: "SANDY", colorCategory: "NOVELTY", type: "Rose", stemLengths: [40, 50, 60], description: "A soft novelty rose with beachy tones and relaxed elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/74425155-16c3-4e49-a546-7b851cb86ebe.jpg" },
            { id: "GDR-SECRETGARDEN", variety: "SECRET GARDEN", colorCategory: "PINK", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A nostalgic, light pink garden-style rose with a sweet, romantic opening.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/8f20f727-dea7-45ce-aee7-678f4291d504.png" },
            { id: "ROS-SHIMMER", variety: "SHIMMER", colorCategory: "PEACH", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A peach rose with glowing petals and radiant finish.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/dfe9d919-d592-4fc4-9114-8552a9b0465c.jpg" },
            { id: "ROS-SHOCKINGBLUE", variety: "SHOCKING BLUE", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A bold lavender rose with electric tones and striking presence.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2810b5b4-9c90-4e24-aafc-8cf1e8b99975.jpg" },
            { id: "ROS-SILANTOI", variety: "SILANTOI", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50], description: "A bicolor rose with tribal elegance and earthy contrast.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2d71e224-84e5-4536-a16b-de32e7b82a65.jpg" },
            { id: "ROS-SILVERYLIGHT", variety: "SILVERY LIGHT", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A pale lavender rose with silvery sheen and ethereal glow.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/ab5205ba-8304-402f-9cf4-b4b2e10ce045.png" },
            { id: "ROS-SMOOTHIE", variety: "SMOOTHIE", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A pink/magenta variety loved by florists for being nearly thornless.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/b484518e-4a4d-4f7c-8f28-42aece9a7d8f.png" },
            { id: "ROS-STARPLATINUM", variety: "STAR PLATINUM", colorCategory: "LAVENDER", type: "Rose", stemLengths: [40, 50, 60], description: "A lavender rose with stellar brilliance and refined structure.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/a05399a1-8175-4d54-903f-dc479746b473.png" },
            { id: "ROS-STARDUST", variety: "STARDUST", colorCategory: "YELLOW", type: "Rose", stemLengths: [50, 60, 70], description: "A yellow rose with sparkling tones and celestial warmth.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/674c57f9-1727-4472-b934-cfd7eb9d132b.webp" },
            { id: "GDR-SUNNYDAYS", variety: "SUNNY DAYS", colorCategory: "YELLOW", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A cheerful yellow garden rose that brightens any bouquet.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/6ff77449-7ffd-4064-a019-17202b1b60c6.jpg" },
            { id: "ROS-SWEETELEGANCE", variety: "SWEET ELEGANCE", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A graceful pink rose with refined petals and gentle charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/5ee73bbf-2280-466b-88e9-e24bb0bb94da.png" },
            { id: "ROS-SWEETESCIMO", variety: "SWEET ESCIMO", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60], description: "A frosty light-pink rose with soft pink and white transitions.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/a64e0633-c744-41c1-9b0f-ffb62b209df8.png" },
            { id: "ROS-SWEETUNIQUE", variety: "SWEET UNIQUE", colorCategory: "PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A distinct pink rose with sweet tones and standout form.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/c2d7b845-403e-444b-98b5-11ac85bae85d.jpg" },
            { id: "ROS-SWEETNESS", variety: "SWEETNESS", colorCategory: "BICOLOR", type: "Rose", stemLengths: [50, 60, 70], description: "A bicolor rose with sugary hues and tender appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/a8dd0084-76fe-417a-8988-30854f9585b7.png" },
            { id: "ROS-TARA", variety: "TARA", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60], description: "A bright yellow rose with classic form and sunny disposition.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/cfefc084-ecaa-4cbd-858c-e4681d754a5f.jpg" },
            { id: "ROS-TIBET", variety: "TIBET", colorCategory: "WHITE", type: "Rose", stemLengths: [40, 50, 60], description: "A pure white rose with serene beauty and spiritual grace.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/cfe9f1b6-638c-4f4c-bd1f-fa3e611678b6.jpg" },
            { id: "ROS-TIFFANY", variety: "TIFFANY", colorCategory: "PEACH", type: "Rose", stemLengths: [50, 60, 70], description: "A peach rose with luxury tones and elegant bloom.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/094f1d62-3601-4d05-9390-f8954e6ac675.jpg" },
            { id: "GDR-TIPTOP", variety: "TIP TOP", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60, 70], description: "A top-tier peach garden rose with full petals and premium appeal.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/4683dba8-6fb6-4dc4-8d85-5358180fb077.jpg" },
            { id: "ROS-TOPAZ", variety: "TOPAZ", colorCategory: "HOT PINK", type: "Rose", stemLengths: [40, 50, 60, 70], description: "A striking hot pink rose with gemstone brilliance and bold style.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/e5c8d35e-5bf9-4793-8baa-9f2d2c670820.webp" },
            { id: "ROS-TWILIGHT", variety: "TWILIGHT", colorCategory: "BICOLOR", type: "Rose", stemLengths: [40, 50, 60], description: "A peach/orange variety that captures the deep, glowing colors of dusk.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/f9322cbe-64f1-491c-8cc6-8bc3b5dd6b2b.png" },
            { id: "ROS-VENDELA", variety: "VENDELA", colorCategory: "CREAM", type: "Rose", stemLengths: [40, 50, 60], description: "A creamy rose with smooth texture and timeless elegance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/2c1f28ba-5faa-4fc7-bae5-11d1196e12fd.png" },
            { id: "GDR-WHITEOHARA", variety: "WHITE O'HARA", colorCategory: "WHITE", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A white garden rose with full blooms and romantic fragrance.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/235a9993-9044-4f3b-83a3-fe522b35a395.webp" },
            { id: "GDR-WILDSPIRIT", variety: "WILD SPIRIT", colorCategory: "PEACH", type: "Garden Rose", stemLengths: [40, 50, 60], description: "A peach-orange novelty rose with unique ruffles and sunset undertones.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,fit=crop,q=100,w=375,h=375/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/315b4f8b-1d64-44c7-a3ef-3b2e02a0d50c.png" },
            { id: "ROS-XCITING", variety: "XCITING", colorCategory: "YELLOW", type: "Rose", stemLengths: [40, 50, 60], description: "A lively yellow rose with energetic petals and vibrant charm.", imageUrl: "https://cdn.zyrosite.com/cdn-cgi/image/format=auto,w=375,h=375,fit=crop,q=100/cdn-ecommerce/store_01K0P3ZQ87AT5KYDN2V7QAR0AY/assets/57120f79-f66c-46ed-b8ed-bac3c1c74da9.webp" }
        ];

        // --- 2. APP STATE & DOM ELEMENTS ---
        let quote = {};
        let currentDetailProduct = null;
        let activeFilters = { types: [], colors: [] };
        let productsData = PRODUCTS;
        let offlineMode = false;


        const screens = {
            catalog: document.getElementById('screen-catalog'),
            detail: document.getElementById('screen-detail'),
            review: document.getElementById('screen-review'), 
        };
        const filterModal = document.getElementById('filter-modal-overlay');
        const productListElement = document.getElementById('product-list');
        const scrollToTopBtn = document.getElementById('scrollToTopBtn');
        const searchInput = document.getElementById('searchInput');
        const clearSearchBtn = document.getElementById('clearSearchBtn');
        const loadingOverlay = document.getElementById('loading-overlay');

        const quoteForm = document.getElementById('quote-form');
        const submitBtn = document.getElementById('submit-quote-request-btn');
        const phoneInput = document.getElementById('phone');
        const deliveryDateInput = document.getElementById('delivery-date');

        // --- 3. NAVIGATION ---
        const navigateTo = (screenName) => {
            Object.values(screens).forEach(s => s.classList.remove('active'));
            screens[screenName].classList.add('active');
            if (screenName === 'catalog') {
                renderCatalog();
                sendCatalogBeacon('page_view');
            }
        };

        // Helper to update stock badges in catalog view
        const updateItemStockUI = (productItem, product, selectedStem) => {
            const badge = productItem.querySelector('.stock-badge');
            const plusBtn = productItem.querySelector('.plus-btn');
            const minusBtn = productItem.querySelector('.minus-btn');
            const qtyVal = productItem.querySelector('.quantity-input');
            const qtyControl = productItem.querySelector('.quantity-control');
            const noteEl = productItem.querySelector('.out-of-stock-mini-note');
            
            if (!badge) return;

            if (isNaN(selectedStem)) {
                badge.textContent = "Select stem...";
                badge.style.color = "var(--text-light)";
                badge.style.backgroundColor = "transparent";
                plusBtn.disabled = true;
                minusBtn.disabled = true;
                if (qtyVal) qtyVal.value = "0";
                qtyControl.style.border = "";
                qtyControl.style.backgroundColor = "";
                plusBtn.style.cssText = "";
                minusBtn.style.cssText = "";
                if (qtyVal) qtyVal.style.cssText = "";
                if (noteEl) noteEl.style.display = "none";
                return;
            }
            
            // Retrieve current quantity in cart
            const cartQty = getQuoteQty(product.id, selectedStem);
            if (qtyVal && parseInt(qtyVal.value) !== cartQty) {
                qtyVal.value = cartQty;
            }

            if (offlineMode) {
                // In offline fallback, hide availability checks entirely as per user instructions
                const badgeGroup = badge.closest('.stock-control-group');
                if (badgeGroup) badgeGroup.style.display = 'none';
                if (noteEl) noteEl.style.display = 'none';
                plusBtn.disabled = false;
                minusBtn.disabled = false;
                
                if (cartQty > 0) {
                    qtyControl.style.border = "1px solid #4CAF50";
                    qtyControl.style.backgroundColor = "#e8f5e9";
                    plusBtn.style.cssText = "color: #4CAF50;";
                    minusBtn.style.cssText = "color: #4CAF50;";
                    if (qtyVal) qtyVal.style.cssText = "color: #4CAF50;";
                } else {
                    qtyControl.style.border = "";
                    qtyControl.style.backgroundColor = "";
                    plusBtn.style.cssText = "";
                    minusBtn.style.cssText = "";
                    if (qtyVal) qtyVal.style.cssText = "";
                }
                return;
            }
            
            const badgeGroup = badge.closest('.stock-control-group');
            if (badgeGroup) badgeGroup.style.display = 'inline-block';
            
            const stock = (product.stock && product.stock[selectedStem] !== undefined) ? product.stock[selectedStem] : 0;
            
            // Calculate remaining stock
            const remainingStock = Math.max(0, stock - cartQty);
            
            if (stock === 0) {
                const hasOtherStock = product.stemLengths.some(s => s !== selectedStem && ((product.stock && product.stock[s] !== undefined) ? product.stock[s] : 0) > 0);
                if (hasOtherStock) {
                    badge.textContent = "Stem Length stock to be confirmed *";
                } else {
                    badge.textContent = "Stock to be confirmed *";
                }
                badge.style.color = "#1565c0"; // Blue text
                badge.style.backgroundColor = "#e3f2fd"; // Blue background
                
                plusBtn.disabled = false;
                minusBtn.disabled = false;
                
                qtyControl.style.border = "1px solid #1565c0"; // Blue border
                qtyControl.style.backgroundColor = cartQty > 0 ? "#e3f2fd" : "transparent";
                plusBtn.style.cssText = "color: #1565c0; background-color: #e3f2fd;";
                minusBtn.style.cssText = "color: #1565c0; background-color: #e3f2fd;";
                if (qtyVal) qtyVal.style.cssText = "color: #1565c0;";
                
                if (noteEl) {
                    if (cartQty > 0) {
                        noteEl.textContent = `* ${cartQty} boxes to be confirmed from partner farms`;
                    } else {
                        noteEl.textContent = "*Request a Quote and we ll get back to you shortly";
                    }
                    noteEl.style.color = "#1565c0"; // Blue note
                    noteEl.style.display = "block";
                }
            } else {
                badge.style.backgroundColor = "#e8f5e9";
                
                plusBtn.disabled = false;
                minusBtn.disabled = false;
                
                if (cartQty > 0) {
                    if (cartQty > stock) {
                        badge.textContent = `0 boxes available`;
                        badge.style.color = "#1565c0"; // Blue for confirmed split
                        badge.style.backgroundColor = "#e3f2fd";
                        
                        qtyControl.style.border = "1px solid #1565c0"; // Blue border
                        qtyControl.style.backgroundColor = "#e3f2fd";
                        plusBtn.style.cssText = "color: #1565c0; background-color: #e3f2fd;";
                        minusBtn.style.cssText = "color: #1565c0; background-color: #e3f2fd;";
                        if (qtyVal) qtyVal.style.cssText = "color: #1565c0;";
                        
                        if (noteEl) {
                            noteEl.textContent = `* ${cartQty - stock} boxes to be confirmed from partner farms`;
                            noteEl.style.color = "#1565c0"; // Blue note
                            noteEl.style.display = "block";
                        }
                    } else {
                        badge.textContent = `${remainingStock} boxes available`;
                        badge.style.color = "#2e7d32"; // Green for in-stock
                        badge.style.backgroundColor = "#e8f5e9";
                        
                        qtyControl.style.border = "1px solid #4CAF50"; // Green border
                        qtyControl.style.backgroundColor = "#e8f5e9";
                        plusBtn.style.cssText = "color: #4CAF50; background-color: #e8f5e9;";
                        minusBtn.style.cssText = "color: #4CAF50; background-color: #e8f5e9;";
                        if (qtyVal) qtyVal.style.cssText = "color: #4CAF50;";
                        
                        if (noteEl) noteEl.style.display = "none";
                    }
                } else {
                    badge.textContent = `${stock} boxes available`;
                    badge.style.color = "#2e7d32";
                    qtyControl.style.border = "";
                    qtyControl.style.backgroundColor = "";
                    plusBtn.style.cssText = "";
                    minusBtn.style.cssText = "";
                    if (qtyVal) qtyVal.style.cssText = "";
                    if (noteEl) noteEl.style.display = "none";
                }
            }
        };

        // --- 4. SCREEN 1: CATALOG RENDER ---
        const renderCatalog = () => {
            const searchFilter = searchInput.value.toLowerCase();
            productListElement.innerHTML = ''; 
            
            const filteredProducts = productsData.filter(p => {
                const totalStock = p.stemLengths.reduce((sum, len) => sum + (p.stock && p.stock[len] ? parseInt(p.stock[len]) : 0), 0);
                
                // Hide (PROMO) items if they have zero stock on the selected date/incoterm
                const isPromo = p.variety.toUpperCase().includes("(PROMO)") || p.variety.toUpperCase().includes("PROMO");
                if (isPromo && totalStock <= 0 && !offlineMode) {
                    return false;
                }

                const matchesSearch = searchFilter === '' ||
                    p.variety.toLowerCase().includes(searchFilter) ||
                    p.colorCategory.toLowerCase().includes(searchFilter) ||
                    p.type.toLowerCase().includes(searchFilter);
                const matchesType = activeFilters.types.length === 0 || activeFilters.types.includes(p.type);
                const matchesColor = activeFilters.colors.length === 0 || activeFilters.colors.includes(p.colorCategory);
                return matchesSearch && matchesType && matchesColor;
            });

            // Helper to compute lowest available variety price for tie-breaking
            const getMinPrice = (p) => {
                if (!p) return Infinity;
                let prices = [];
                if (p.basePrice && typeof p.basePrice === 'object') {
                    Object.values(p.basePrice).forEach(val => {
                        const num = parseFloat(val);
                        if (num > 0) prices.push(num);
                    });
                }
                if (p.prices && typeof p.prices === 'object') {
                    Object.values(p.prices).forEach(val => {
                        const num = parseFloat(val);
                        if (num > 0) prices.push(num);
                    });
                }
                if (typeof p.price === 'number' && p.price > 0) prices.push(p.price);
                if (typeof p.price === 'string' && parseFloat(p.price) > 0) prices.push(parseFloat(p.price));
                return prices.length > 0 ? Math.min(...prices) : Infinity;
            };

            // Sort products by total stem count (descending) with variety pricing ascending as tie-breaker (lowest to highest price), and alphabetical A-Z fallback
            filteredProducts.sort((a, b) => {
                const totalStemsA = a.stemLengths.reduce((sum, len) => sum + (a.stock && a.stock[len] ? parseInt(a.stock[len]) : 0), 0) * 100;
                const totalStemsB = b.stemLengths.reduce((sum, len) => sum + (b.stock && b.stock[len] ? parseInt(b.stock[len]) : 0), 0) * 100;
                if (totalStemsB !== totalStemsA) {
                    return totalStemsB - totalStemsA;
                }
                const minPriceA = getMinPrice(a);
                const minPriceB = getMinPrice(b);
                if (minPriceA !== minPriceB) {
                    return minPriceA - minPriceB; // Ascending price tie-breaker
                }
                return a.variety.localeCompare(b.variety);
            });

            if (filteredProducts.length === 0) {
                productListElement.innerHTML = `<p style="text-align:center; color: var(--text-light); padding: 20px;">No varieties found matching your criteria.</p>`;
                return;
            }

            filteredProducts.forEach(p => {
                const item = document.createElement('div');
                item.className = 'product-item';
                item.dataset.productId = p.id;
                const stemOptions = '<option value="">Select stem...</option>' + p.stemLengths.map(len => `<option value="${len}">${len}cm</option>`).join('');

                const imgHtml = p.imageUrl ? `<img src="${p.imageUrl}" alt="${p.variety}" class="product-thumbnail">` :
                    `<div class="product-thumbnail placeholder-image-box" style="display: flex; align-items: center; justify-content: center; background-color: #f0f4f0; color: #5a755a; font-size: 10px; text-align: center; font-weight: bold; border: 1px dashed #c2d6c2; border-radius: 6px; padding: 4px; box-sizing: border-box;">Image Available Shortly</div>`;

                item.innerHTML = `
                    ${imgHtml}
                    <div class="product-content-wrapper">
                        <div class="product-item-main">
                            <div class="product-info">
                                <div class="meta-row">
                                     <span class="color-category">${p.colorCategory}</span>
                                     <span class="separator"> </span>
                                     <span class="product-type">${p.type}</span>
                                </div>
                                <div class="variety">${p.variety}</div>
                            </div>
                            <div class="product-item-actions">
                                <button class="view-details-btn">Details</button>
                            </div>
                        </div>
                        <div class="product-item-controls">
                            <div class="control-group">
                                <label>Stem Length (cm)</label>
                                <select class="stem-select">${stemOptions}</select>
                            </div>
                            <div class="control-group stock-control-group">
                                <label>Availability</label>
                                <span class="stock-badge" style="font-weight: 500; font-size: 14px; padding: 4px 8px; border-radius: 6px; display: inline-block;">Select stem...</span>
                                <span class="out-of-stock-mini-note" style="display: none; font-size: 13px; color: #1565c0; margin-top: 4px; font-style: italic; font-weight: 500;">*Request a Quote and we ll get back to you shortly</span>
                            </div>
                            <div class="control-group">
                                <label>Boxes</label>
                                <div class="quantity-control">
                                    <button class="quantity-btn minus-btn">-</button>
                                    <input type="number" class="quantity-input" value="0" min="0">
                                    <button class="quantity-btn plus-btn">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                productListElement.appendChild(item);
                
                // Initialize stock badge for default stem select value
                const stemSelect = item.querySelector('.stem-select');
                if (stemSelect) {
                    updateItemStockUI(item, p, parseInt(stemSelect.value));
                }
            });
            
            const footerNote = document.createElement('div');
            footerNote.className = 'catalog-footer-note';
            footerNote.textContent = 'LAST ITEM, CONTINUE BROWSING ABOVE';
            productListElement.appendChild(footerNote);
        };

        // Handle stem select change in catalog
        productListElement.addEventListener('change', (e) => {
            if (e.target.matches('.stem-select')) {
                const productItem = e.target.closest('.product-item');
                if (!productItem) return;
                const productId = productItem.dataset.productId;
                const product = productsData.find(p => String(p.id) === String(productId));
                if (product) {
                    updateItemStockUI(productItem, product, parseInt(e.target.value));
                }
            }
        });

        // Catalog Event Delegation (clicks)
        productListElement.addEventListener('click', (e) => {
            const productItem = e.target.closest('.product-item');
            if (!productItem) return;
            
            const productId = productItem.dataset.productId;
            const product = productsData.find(p => String(p.id) === String(productId));

            if (!product) return; 

            if (e.target.matches('.view-details-btn') || e.target.matches('.product-thumbnail')) {
                renderDetailScreen(productId);
                navigateTo('detail');
            } else if (e.target.matches('.plus-btn')) {
                const stemSelect = productItem.querySelector('.stem-select');
                const selectedStem = parseInt(stemSelect.value);
                if (isNaN(selectedStem)) {
                    alert("Please select a stem length first.");
                    return;
                }
                const cartQty = getQuoteQty(productId, selectedStem);
                updateQuoteQty(productId, selectedStem, cartQty + 1);
                updateItemStockUI(productItem, product, selectedStem);
            } else if (e.target.matches('.minus-btn')) {
                const stemSelect = productItem.querySelector('.stem-select');
                const selectedStem = parseInt(stemSelect.value);
                if (isNaN(selectedStem)) {
                    alert("Please select a stem length first.");
                    return;
                }
                const cartQty = getQuoteQty(productId, selectedStem);
                if (cartQty > 0) {
                    updateQuoteQty(productId, selectedStem, cartQty - 1);
                    updateItemStockUI(productItem, product, selectedStem);
                }
            }
        });

        // Keyboard direct quantity inputs for catalog view
        productListElement.addEventListener('input', (e) => {
            if (e.target.matches('.quantity-input')) {
                const productItem = e.target.closest('.product-item');
                if (!productItem) return;
                const productId = productItem.dataset.productId;
                const product = productsData.find(p => String(p.id) === String(productId));
                if (!product) return;
                
                const stemSelect = productItem.querySelector('.stem-select');
                const selectedStem = parseInt(stemSelect.value);
                if (isNaN(selectedStem)) {
                    alert("Please select a stem length first.");
                    e.target.value = 0;
                    return;
                }
                
                let qty = parseInt(e.target.value);
                if (isNaN(qty) || qty < 0) {
                    qty = 0;
                }
                
                updateQuoteQty(productId, selectedStem, qty);
                updateItemStockUI(productItem, product, selectedStem);
            }
        });
        
        // Search Input Logic with Clear Button
        searchInput.addEventListener('input', () => {
            renderCatalog();
            if (searchInput.value.length > 0) {
                clearSearchBtn.classList.add('visible');
            } else {
                clearSearchBtn.classList.remove('visible');
            }
        });

        clearSearchBtn.addEventListener('click', () => {
            searchInput.value = '';
            renderCatalog();
            clearSearchBtn.classList.remove('visible');
            searchInput.focus();
        });

        productListElement.addEventListener('scroll', () => {
            if (productListElement.scrollTop > 200) {
                scrollToTopBtn.style.display = 'block';
            } else {
                scrollToTopBtn.style.display = 'none';
            }
        });
        scrollToTopBtn.addEventListener('click', () => {
            productListElement.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // --- 5. FILTER MODAL LOGIC ---
        const renderFilterModal = () => {
            const container = document.getElementById('filter-options-container');
            const types = [...new Set(productsData.map(p => p.type))];
            const colors = [...new Set(productsData.map(p => p.colorCategory))];
            
            let html = `<div class="filter-section"><h3>Type</h3><div class="filter-options">`;
            types.forEach(type => {
                const isChecked = activeFilters.types.includes(type) ? 'checked' : '';
                html += `<input type="checkbox" id="type-${type}" value="${type}" data-filter-type="types" ${isChecked}><label for="type-${type}">${type}</label>`;
            });
            html += `</div></div><div class="filter-section"><h3>Color</h3><div class="filter-options">`;
            colors.forEach(color => {
                const isChecked = activeFilters.colors.includes(color) ? 'checked' : '';
                html += `<input type="checkbox" id="color-${color}" value="${color}" data-filter-type="colors" ${isChecked}><label for="color-${color}">${color}</label>`;
            });
            html += `</div></div>`;
            container.innerHTML = html;
        };

        document.getElementById('filter-btn').addEventListener('click', () => {
            renderFilterModal();
            filterModal.classList.add('visible');
        });
        filterModal.addEventListener('click', (e) => {
            if (e.target === filterModal) filterModal.classList.remove('visible');
        });
        document.getElementById('apply-filters-btn').addEventListener('click', () => {
            activeFilters = { types: [], colors: [] };
            document.querySelectorAll('#filter-options-container input:checked').forEach(input => {
                activeFilters[input.dataset.filterType].push(input.value);
            });
            renderCatalog();
            filterModal.classList.remove('visible');
        });
        document.getElementById('clear-filters-btn').addEventListener('click', () => {
            activeFilters = { types: [], colors: [] };
            renderCatalog();
            filterModal.classList.remove('visible');
        });

        // Helper to update stock badges in detail view
        const updateDetailStockUI = () => {
            // Deprecated: Detail stock UI is now built row-by-row on load
        };

        // Helper to update detail row UI dynamically on click/type to prevent losing text input focus
        const updateDetailRowUI = (row, stem, cartQty) => {
            const stock = (currentDetailProduct.stock && currentDetailProduct.stock[stem] !== undefined) ? currentDetailProduct.stock[stem] : 0;
            const badgeContainer = row.querySelector('.row-badge-container');
            const noteContainer = row.querySelector('.row-note-container');
            const qtyControl = row.querySelector('.quantity-control');
            const qtyInput = row.querySelector('.detail-row-qty-input');
            const minusBtn = row.querySelector('.detail-row-qty-btn[data-action="minus"]');
            const plusBtn = row.querySelector('.detail-row-qty-btn[data-action="plus"]');
            
            if (!badgeContainer) return;
            
            let badgeHtml = '';
            let qtyControlStyle = '';
            let valStyle = '';
            let btnStyle = '';
            let noteHtml = '';
            
            const remainingStock = Math.max(0, stock - cartQty);
            
            if (offlineMode) {
                badgeHtml = '';
                qtyControlStyle = cartQty > 0 ? 'border: 1px solid #4CAF50; background-color: #e8f5e9;' : '';
                valStyle = cartQty > 0 ? 'color: #4CAF50;' : '';
                btnStyle = cartQty > 0 ? 'border-color: #4CAF50; color: #4CAF50; background-color: #e8f5e9;' : '';
            } else if (stock === 0) {
                const hasOtherStock = currentDetailProduct.stemLengths.some(otherStem => otherStem !== stem && ((currentDetailProduct.stock && currentDetailProduct.stock[otherStem] !== undefined) ? currentDetailProduct.stock[otherStem] : 0) > 0);
                const badgeText = hasOtherStock ? "Stem Length stock to be confirmed *" : "Stock to be confirmed *";
                badgeHtml = `<span class="stock-badge" style="font-weight: 500; font-size: 12px; padding: 3px 6px; border-radius: 4px; color: #1565c0; background-color: #e3f2fd;">${badgeText}</span>`;
                
                qtyControlStyle = 'border: 1px solid #1565c0;';
                if (cartQty > 0) {
                    qtyControlStyle += ' background-color: #e3f2fd;';
                }
                valStyle = 'color: #1565c0;';
                btnStyle = 'border-color: #1565c0; color: #1565c0; background-color: #e3f2fd;';
                
                if (cartQty > 0) {
                    noteHtml = `<div class="detail-row-note" style="font-size: 11px; color: #1565c0; margin-top: 4px; font-weight: 500; font-style: italic;">* ${cartQty} boxes to be confirmed from partner farms</div>`;
                }
            } else {
                if (cartQty > 0) {
                    if (cartQty > stock) {
                        badgeHtml = `<span class="stock-badge" style="font-weight: 500; font-size: 12px; padding: 3px 6px; border-radius: 4px; color: #1565c0; background-color: #e3f2fd;">0 boxes available</span>`;
                        qtyControlStyle = 'border: 1px solid #1565c0; background-color: #e3f2fd;';
                        valStyle = 'color: #1565c0;';
                        btnStyle = 'border-color: #1565c0; color: #1565c0; background-color: #e3f2fd;';
                        noteHtml = `<div class="detail-row-note" style="font-size: 11px; color: #1565c0; margin-top: 4px; font-weight: 500; font-style: italic;">* ${cartQty - stock} boxes to be confirmed from partner farms</div>`;
                    } else {
                        badgeHtml = `<span class="stock-badge" style="font-weight: 500; font-size: 12px; padding: 3px 6px; border-radius: 4px; color: #2e7d32; background-color: #e8f5e9;">${remainingStock} boxes available</span>`;
                        qtyControlStyle = 'border: 1px solid #4CAF50; background-color: #e8f5e9;';
                        valStyle = 'color: #4CAF50;';
                        btnStyle = 'border-color: #4CAF50; color: #4CAF50; background-color: #e8f5e9;';
                    }
                } else {
                    badgeHtml = `<span class="stock-badge" style="font-weight: 500; font-size: 12px; padding: 3px 6px; border-radius: 4px; color: #2e7d32; background-color: #e8f5e9;">${stock} boxes available</span>`;
                }
            }
            
            badgeContainer.innerHTML = badgeHtml;
            noteContainer.innerHTML = noteHtml;
            qtyControl.style.cssText = 'display: flex; align-items: center; border-radius: 8px;' + qtyControlStyle;
            if (qtyInput) {
                qtyInput.style.cssText = 'border: none; background-color: transparent; width: 45px; height: 30px; box-sizing: border-box; outline: none; font-family: inherit; font-size: 16px; font-weight: 500; text-align: center; ' + valStyle;
                if (qtyInput.value === "" || parseInt(qtyInput.value) !== cartQty) {
                    qtyInput.value = cartQty;
                }
            }
            if (minusBtn) minusBtn.style.cssText = btnStyle;
            if (plusBtn) plusBtn.style.cssText = btnStyle;
            
            // Check if entire detail screen has out of stock
            const detailRows = document.querySelectorAll('#detail-stems-list [data-stem-length]');
            let anyOutOfStock = false;
            detailRows.forEach(r => {
                const s = parseInt(r.dataset.stemLength);
                const st = (currentDetailProduct.stock && currentDetailProduct.stock[s] !== undefined) ? currentDetailProduct.stock[s] : 0;
                if (st === 0) anyOutOfStock = true;
            });
            document.getElementById('detail-out-of-stock-note').style.color = '#1565c0'; // blue note
            document.getElementById('detail-out-of-stock-note').style.display = anyOutOfStock ? 'block' : 'none';
        };

        // --- 6. SCREEN 2: DETAIL ---
        const renderDetailScreen = (productId) => {
            currentDetailProduct = productsData.find(p => String(p.id) === String(productId));
            if (!currentDetailProduct) return;
            
            document.getElementById('detail-header-title').textContent = currentDetailProduct.variety;
            
            const detailImg = document.getElementById('detail-img');
            const detailImgPlaceholder = document.getElementById('detail-img-placeholder');
            if (currentDetailProduct.imageUrl) {
                detailImg.src = currentDetailProduct.imageUrl;
                detailImg.style.display = 'block';
                if (detailImgPlaceholder) detailImgPlaceholder.style.display = 'none';
            } else {
                detailImg.style.display = 'none';
                if (detailImgPlaceholder) detailImgPlaceholder.style.display = 'flex';
            }
            
            document.getElementById('detail-variety').textContent = currentDetailProduct.variety;
            document.getElementById('detail-type').textContent = currentDetailProduct.type.toUpperCase();
            
            const colorEl = document.getElementById('detail-list-color');
            if (colorEl) {
                const catStr = (currentDetailProduct.colorCategory || 'Standard').trim().toUpperCase();
                let bgStyle = 'background-color: #94a3b8;';
                let borderStyle = 'border: 1px solid rgba(0,0,0,0.18);';

                if (catStr.includes('PEACH')) {
                    bgStyle = 'background-color: #fca582;'; // True warm peach
                } else if (catStr.includes('HOT PINK') || catStr.includes('HOTPINK') || catStr.includes('MAGENTA') || catStr.includes('FUCHSIA')) {
                    bgStyle = 'background-color: #db2777;'; // Hot pink / Magenta
                } else if (catStr.includes('PINK') || catStr.includes('ROSE')) {
                    bgStyle = 'background-color: #f472b6;'; // Soft pink
                } else if (catStr.includes('RED') || catStr.includes('BURGUNDY') || catStr.includes('CRIMSON')) {
                    bgStyle = 'background-color: #dc2626;'; // Rich red
                } else if (catStr.includes('CREAM') || catStr.includes('IVORY')) {
                    bgStyle = 'background-color: #fef08a;'; // Warm cream
                    borderStyle = 'border: 1px solid #cbd5e1;';
                } else if (catStr.includes('WHITE')) {
                    bgStyle = 'background-color: #ffffff;'; // Crisp white
                    borderStyle = 'border: 1px solid #cbd5e1;';
                } else if (catStr.includes('YELLOW') || catStr.includes('GOLD')) {
                    bgStyle = 'background-color: #eab308;'; // Golden yellow
                } else if (catStr.includes('ORANGE')) {
                    bgStyle = 'background-color: #f97316;'; // Vibrant orange
                } else if (catStr.includes('LAVENDER') || catStr.includes('PURPLE') || catStr.includes('LILAC') || catStr.includes('VIOLET')) {
                    bgStyle = 'background-color: #a855f7;'; // Lavender purple
                } else if (catStr.includes('GREEN')) {
                    bgStyle = 'background-color: #22c55e;'; // Floral green
                } else if (catStr.includes('CORAL') || catStr.includes('SALMON')) {
                    bgStyle = 'background-color: #fb7185;'; // Coral salmon
                } else if (catStr.includes('BICOLOR') || catStr.includes('BI-COLOR') || catStr.includes('TWO TONE')) {
                    bgStyle = 'background: linear-gradient(135deg, #e11d48 50%, #fef08a 50%);'; // Two-tone bicolor split
                } else if (catStr.includes('NOVELTY') || catStr.includes('VARIEGATED') || catStr.includes('MULTI')) {
                    bgStyle = 'background: linear-gradient(135deg, #ec4899 50%, #f97316 50%);'; // Novelty split
                } else if (catStr.includes('BLUE') || catStr.includes('TINTED')) {
                    bgStyle = 'background-color: #3b82f6;'; // Tinted blue
                }

                colorEl.innerHTML = `<span style="display:inline-block; width:13px; height:13px; border-radius:50%; ${bgStyle} ${borderStyle} margin-right:8px; vertical-align:-1.5px; box-shadow: 0 1px 3px rgba(0,0,0,0.12);"></span>${catStr}`;
            }
            document.getElementById('detail-description').textContent = currentDetailProduct.description || '';

            const stemsList = document.getElementById('detail-stems-list');
            stemsList.innerHTML = '';

            currentDetailProduct.stemLengths.forEach(s => {
                const row = document.createElement('div');
                row.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background-color: white;';
                row.dataset.stemLength = s;
                
                row.innerHTML = `
                    <div style="display: flex; flex-direction: column; gap: 3px;">
                        <span style="font-weight: bold; font-size: 15px; color: var(--text-dark);">${s}cm</span>
                        <div class="row-badge-container"></div>
                        <div class="row-note-container"></div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <span style="font-size: 12.5px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.03em;">Boxes:</span>
                        <div class="quantity-control" style="height: 30px;">
                            <button class="quantity-btn detail-row-qty-btn" data-action="minus" style="width: 26px; height: 26px; font-size: 15px;">-</button>
                            <input type="number" class="quantity-input detail-row-qty-input" value="0" min="0" style="height: 26px; font-size: 13px; width: 32px;">
                            <button class="quantity-btn detail-row-qty-btn" data-action="plus" style="width: 26px; height: 26px; font-size: 15px;">+</button>
                        </div>
                    </div>
                `;
                stemsList.appendChild(row);
                
                const cartQty = getQuoteQty(currentDetailProduct.id, s);
                updateDetailRowUI(row, s, cartQty);
            });
        };

        // Multi-row quantity control listener in details view (click)
        document.getElementById('detail-stems-list').addEventListener('click', (e) => {
            const btn = e.target.closest('.detail-row-qty-btn');
            if (!btn) return;
            
            const row = btn.closest('[data-stem-length]');
            const stem = parseInt(row.dataset.stemLength);
            const qtyInput = row.querySelector('.detail-row-qty-input');
            let qty = parseInt(qtyInput.value) || 0;
            
            const action = btn.dataset.action;
            
            if (action === 'plus') {
                qty++;
            } else if (action === 'minus' && qty > 0) {
                qty--;
            }
            qtyInput.value = qty;
            
            // Auto-sync directly to cart
            updateQuoteQty(currentDetailProduct.id, stem, qty);
            updateDetailRowUI(row, stem, qty);
        });

        // Multi-row quantity control listener in details view (keyboard type)
        document.getElementById('detail-stems-list').addEventListener('input', (e) => {
            if (e.target.matches('.detail-row-qty-input')) {
                const row = e.target.closest('[data-stem-length]');
                const stem = parseInt(row.dataset.stemLength);
                let qty = parseInt(e.target.value);
                if (isNaN(qty) || qty < 0) {
                    qty = 0;
                }
                
                updateQuoteQty(currentDetailProduct.id, stem, qty);
                updateDetailRowUI(row, stem, qty);
            }
        });
        
        document.getElementById('screen-detail').addEventListener('click', (e) => {
            if (e.target.id === 'detail-add-to-quote-btn') {
                navigateTo('catalog'); // Go back to catalog
            }
        });

        // --- 7. SCREEN 3: REVIEW & REQUEST ---
        const renderSummaryScreen = () => {
            sendCatalogBeacon('checkout_opened');
            const listEl = document.getElementById('summary-item-list');
            const quoteItems = Object.values(quote);
            listEl.innerHTML = '';

            document.getElementById('summary-items-title').textContent = `Selected Items (${quoteItems.length})`;

            if(quoteItems.length === 0) {
                listEl.innerHTML = `<p style="text-align:center; color: var(--text-light);">Your quote request is empty.</p>`;
            }

            quoteItems.forEach(item => {
                const product = productsData.find(p => String(p.id) === String(item.productId));
                const itemEl = document.createElement('div');
                itemEl.className = 'summary-item';
                itemEl.innerHTML = `
                    <div class="summary-item-info">
                        <div class="variety">${product.variety}</div>
                        <div class="details">${item.stem}cm | ${item.qty} boxes (${item.qty * STEMS_PER_BOX} stems)</div>
                    </div>
                    <div class="summary-item-actions">
                        <i class="fa-solid fa-arrow-up-right-from-square icon-edit" data-quote-key="${item.productId}-${item.stem}"></i>
                        <i class="fa-solid fa-trash-can icon-delete" data-quote-key="${item.productId}-${item.stem}"></i>
                    </div>
                `;
                listEl.appendChild(itemEl);
            });
            updateSummaryTotals();
            validateForm(); 
        };

        const calculateSummary = () => {
            const quoteItems = Object.values(quote);
            let totalBoxes = 0;
            let totalInStock = 0;
            let totalNotInStock = 0;
            
            quoteItems.forEach(item => {
                totalBoxes += item.qty;
                const product = productsData.find(p => String(p.id) === String(item.productId));
                let stockForStem = 0;
                if (product && product.stock && product.stock[item.stem] !== undefined) {
                    stockForStem = parseInt(product.stock[item.stem]) || 0;
                }
                const inStockBoxes = Math.min(item.qty, stockForStem);
                const outOfStockBoxes = item.qty - inStockBoxes;
                totalInStock += inStockBoxes;
                totalNotInStock += outOfStockBoxes;
            });
            
            return {
                totalVarieties: new Set(quoteItems.map(item => item.productId)).size,
                totalBoxes: totalBoxes,
                totalStemLengths: quoteItems.length,
                estimatedVolume: `${totalBoxes * STEMS_PER_BOX} stems`,
                totalInStock: totalInStock,
                totalNotInStock: totalNotInStock
            };
        };

        const updateSummaryTotals = () => {
            const summary = calculateSummary();
            document.getElementById('summary-total-varieties').textContent = summary.totalVarieties;
            document.getElementById('summary-total-boxes').textContent = summary.totalBoxes;
            document.getElementById('summary-total-stem-lengths').textContent = summary.totalStemLengths;
            document.getElementById('summary-estimated-volume').textContent = summary.estimatedVolume;
            if(document.getElementById('summary-total-in-stock')) document.getElementById('summary-total-in-stock').textContent = summary.totalInStock;
            if(document.getElementById('summary-total-not-in-stock')) document.getElementById('summary-total-not-in-stock').textContent = summary.totalNotInStock;

            const selectedSegment = document.querySelector('input[name="client-segment"]:checked')?.value || "COMMERCIAL";
            const currentInco = selectedIncoterm || "";
            const minBoxesRequired = getMinBoxesRequired(currentInco, selectedSegment);

            const moqAlertContainer = document.getElementById('moq-alert-container');
            if (summary.totalBoxes > 0 && summary.totalBoxes < minBoxesRequired) {
                const buyerTypeLabel = (selectedSegment === "WHOLESALE") ? "wholesale resellers" : "commercial buyers";
                moqAlertContainer.innerHTML = `<div class="moq-alert">Minimum order for ${buyerTypeLabel} is ${minBoxesRequired} boxes. You have ${summary.totalBoxes}.</div>`;
            } else if (summary.totalBoxes === 0) {
                 moqAlertContainer.innerHTML = `<div class="moq-alert">Your quote is empty. Please add at least ${minBoxesRequired} boxes to submit.</div>`;
            } else {
                moqAlertContainer.innerHTML = '';
            }
        };

        document.getElementById('summary-item-list').addEventListener('click', (e) => {
            const quoteKey = e.target.dataset.quoteKey;
            if (!quoteKey) return;
            
            if (e.target.classList.contains('icon-delete')) {
                delete quote[quoteKey];
                saveCart(); // SAVE ON DELETE
                renderSummaryScreen(); 
                updateQuoteButton();
            } else if (e.target.classList.contains('icon-edit')) {
                navigateTo('catalog'); 
            }
        });

        // Clear Cart Header Button Logic
        document.getElementById('clear-cart-header-btn').addEventListener('click', () => {
             if(confirm("Are you sure you want to clear your current quote and start over?")) {
                 quote = {};
                 saveCart();
                 renderSummaryScreen();
                 updateQuoteButton();
             }
        });

        // --- DATE LOGIC (Today onwards) ---
        const setupDatePicker = () => {
            const now = new Date();
            const minDate = new Date(now);
            const yyyy = minDate.getFullYear();
            const mm = String(minDate.getMonth() + 1).padStart(2, '0');
            const dd = String(minDate.getDate()).padStart(2, '0');
            deliveryDateInput.min = `${yyyy}-${mm}-${dd}`;
        };

        // Helper to convert file to Base64
        const fileToBase64 = (file) => {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = (error) => reject(error);
            });
        };

        // --- FORM HANDLING ---

        const getFormData = () => {
            const street = document.getElementById('billing-street').value;
            const city = document.getElementById('billing-city').value;
            const state = document.getElementById('billing-state').value;
            const zip = document.getElementById('billing-zip').value;
            const addressCombined = `${street}, ${city}, ${state} ${zip}`;

            const selectedSegment = document.querySelector('input[name="client-segment"]:checked')?.value || "COMMERCIAL";
            return {
                contactName: document.getElementById('contact-name').value,
                companyName: document.getElementById('company-name').value,
                email: document.getElementById('billing-email').value,
                phone: document.getElementById('phone').value,
                street: street,
                city: city,
                state: state,
                zip: zip,
                address: addressCombined,
                vat: document.getElementById('vat-tax').value,
                deliveryDate: document.getElementById('delivery-date').value,
                incoterms: document.getElementById('incoterms').value,
                notes: document.getElementById('client-notes').value,
                clientSegment: selectedSegment,
                resaleFileOnOriginalFile: document.getElementById('resale-file-on-file').checked
            };
        };

        // Save/Load User Info (Persist Forever)
        const saveUserInfoToLocalStorage = (formData) => {
            try { localStorage.setItem(USER_DATA_KEY, JSON.stringify(formData)); } catch (e) {}
        };
        const loadUserInfoFromLocalStorage = () => {
            try {
                const savedData = localStorage.getItem(USER_DATA_KEY);
                if (savedData) {
                    const formData = JSON.parse(savedData);
                    document.getElementById('contact-name').value = formData.contactName || '';
                    document.getElementById('company-name').value = formData.companyName || '';
                    document.getElementById('billing-email').value = formData.email || '';
                    document.getElementById('phone').value = formData.phone || '';
                    document.getElementById('billing-street').value = formData.street || '';
                    document.getElementById('billing-city').value = formData.city || '';
                    document.getElementById('billing-state').value = formData.state || '';
                    document.getElementById('billing-zip').value = formData.zip || '';
                    document.getElementById('vat-tax').value = formData.vat || '';
                    
                    if (formData.resaleFileOnOriginalFile) {
                        const resaleCheckbox = document.getElementById('resale-file-on-file');
                        const resaleFileInput = document.getElementById('resale-file');
                        resaleCheckbox.checked = true;
                        resaleFileInput.required = false;
                        resaleFileInput.disabled = true;
                    }
                }
            } catch (e) {}
        };

        // Save/Load Cart (Persist Per Session Only)
        const saveCart = () => {
            try { 
                sessionStorage.setItem(CART_DATA_KEY, JSON.stringify(quote)); 
                sessionStorage.setItem('SAVED_INCOTERM', selectedIncoterm);
                let sd = selectedDate;
                if (sd) {
                    let match = sd.match(/^(\d{4})-(\d{2})-(\d{2})$/);
                    if (!match) {
                        let d = new Date(sd);
                        if (!isNaN(d.getTime())) {
                            sd = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, '0') + "-" + String(d.getDate()).padStart(2, '0');
                        }
                    }
                }
                sessionStorage.setItem('SAVED_DATE', sd);
                try {
                  const totalBoxes = Object.values(quote).reduce((sum, item) => sum + (item.quantity || 0), 0);
                  if (totalBoxes > 0) {
                    sendCatalogBeacon('cart_update', { cartSummary: totalBoxes + ' boxes' });
                  }
                } catch(eTr) {}
            } catch (e) {}
        };
        const loadCartFromSessionStorage = () => {
            try {
                const savedCart = sessionStorage.getItem(CART_DATA_KEY);
                const savedIncoterm = sessionStorage.getItem('SAVED_INCOTERM');
                const savedDate = sessionStorage.getItem('SAVED_DATE');
                
                if (savedCart) {
                    quote = JSON.parse(savedCart);
                    updateQuoteButton();
                }
                
                if (savedIncoterm) selectedIncoterm = savedIncoterm;
                if (savedDate) selectedDate = savedDate;
                
            } catch (e) {}
        };

        // NEW: Allow +, numbers and spaces but sanitize
        phoneInput.addEventListener('input', (e) => {
             e.target.value = e.target.value.replace(/[^0-9+]/g, '');
        });

        const isValidEmail = (email) => {
            const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(String(email).toLowerCase());
        };

        // NEW: Expert Validation
        const isValidPhone = (phone) => {
             const re = /^\+?\d{7,15}$/;
             return re.test(phone.replace(/[\s-]/g, ''));
        };

        window.getMinBoxesRequired = function(incoterm, segment) {
            if (segment !== "WHOLESALE") return 2;
            if (incoterm === "DOOR DEL") return 3; // Door-to-Door Wholesale is 3 boxes (300 stems)
            return 5;                             // Standard Wholesale (Miami Pick-Up / FOB Quito) is 5 boxes
        };

        const validateForm = () => {
            const requiredFields = Array.from(quoteForm.querySelectorAll('[required]:not(:disabled)'));
            const formFieldsValid = requiredFields.every(field => {
                if (field.type === 'checkbox') return field.checked;
                if (field.id === 'billing-email') return isValidEmail(field.value);
                if (field.id === 'phone') return isValidPhone(field.value);
                if (field.type === 'file') return field.files && field.files.length > 0;
                return field.value.trim() !== '';
            });

            const { totalBoxes } = calculateSummary();
            const selectedSegment = document.querySelector('input[name="client-segment"]:checked')?.value || "COMMERCIAL";
            const currentInco = selectedIncoterm || "";
            const minBoxesRequired = getMinBoxesRequired(currentInco, selectedSegment);
            
            const moqWarning = document.getElementById('reseller-moq-warning');
            let segmentMoqValid = true;
            
            if (selectedSegment === "WHOLESALE" && totalBoxes < minBoxesRequired) {
                segmentMoqValid = false;
                if (moqWarning) {
                    const warningText = (currentInco === "DOOR DEL")
                        ? "* Wholesale Reseller pricing for Delivery to Destination requires a minimum order of 3 boxes. To order less than 3 boxes, please select the Commercial End-User option above."
                        : "* Wholesale Reseller pricing requires a minimum order of 5 boxes. To order less than 5 boxes, please select the Commercial End-User option above.";
                    moqWarning.textContent = warningText;
                    moqWarning.style.display = 'block';
                }
            } else {
                if (moqWarning) moqWarning.style.display = 'none';
            }

            const meetsMOQ = totalBoxes >= minBoxesRequired;

            const canSubmit = formFieldsValid && segmentMoqValid && meetsMOQ;
            submitBtn.disabled = !canSubmit;
        };

        quoteForm.addEventListener('input', validateForm);
        quoteForm.addEventListener('change', (e) => {
            if (e.target.name === 'client-segment') {
                updateSummaryTotals();
                validateForm();
            }
        });

        const resaleCheckbox = document.getElementById('resale-file-on-file');
        const resaleFileInput = document.getElementById('resale-file');
        resaleCheckbox.addEventListener('change', () => {
            if (resaleCheckbox.checked) {
                resaleFileInput.disabled = true;
                resaleFileInput.value = '';
            } else {
                resaleFileInput.disabled = false;
            }
            validateForm();
        });

        // --- SUBMIT LOGIC (FETCH TO GOOGLE SCRIPT WITH FILE UPLOAD) ---
        quoteForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // Check Config
            if (GOOGLE_SCRIPT_URL === "REPLACE_WITH_YOUR_DEPLOYED_SCRIPT_URL" || GOOGLE_SCRIPT_URL.indexOf("REPLACE") !== -1) {
                alert("CONFIGURATION ERROR: Please set the Google Script URL in the code.");
                return;
            }

            loadingOverlay.classList.add('visible'); // Show Spinner
            const formData = getFormData();
            saveUserInfoToLocalStorage(formData);

            // Read resale certificate file if present
            let resaleFileBase64 = null;
            let resaleFileName = null;
            if (resaleFileInput && resaleFileInput.files && resaleFileInput.files[0]) {
                try {
                    resaleFileBase64 = await fileToBase64(resaleFileInput.files[0]);
                    resaleFileName = resaleFileInput.files[0].name;
                } catch (err) {
                    console.error("Failed to read resale certificate file", err);
                }
            }

            // Prepare Payload for GAS
            const payload = {
                client: {
                    ...formData,
                    resaleFile: resaleFileBase64,
                    resaleFileName: resaleFileName
                },
                summary: calculateSummary(),
                items: Object.values(quote).map(item => {
                    const p = productsData.find(prod => String(prod.id) === String(item.productId));
                    return {
                        variety: p.variety,
                        type: p.type,
                        stem: item.stem,
                        qty: item.qty
                    };
                })
            };

            // Send to GAS
            fetch(GOOGLE_SCRIPT_URL, {
                method: 'POST',
                mode: 'no-cors', // 'no-cors' allows sending to Google from external domain but returns opaque response
                cache: 'no-cache',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            })
            .then(() => {
                // Success Handling (Blind success due to no-cors)
                loadingOverlay.classList.remove('visible');
                alert("Thank you! Your quote request has been sent successfully. We will contact you shortly.");
                
                // Clear Cart Logic
                quote = {}; 
                saveCart();
                renderSummaryScreen();
                updateQuoteButton();
                navigateTo('catalog');
            })
            .catch(error => {
                loadingOverlay.classList.remove('visible');
                console.error(error);
                alert("There was an error submitting your request. Please try again or contact us directly.");
            });
        });

        // --- GLOBAL QUOTE & NAVIGATION ---
        const addToQuote = (productId, stem, qty) => {
            const quoteKey = `${productId}-${stem}`;
            if (quote[quoteKey]) {
                quote[quoteKey].qty += qty;
            } else {
                quote[quoteKey] = { productId: String(productId), stem: parseInt(stem), qty };
            }
            saveCart(); // SAVE ON ADD
            updateQuoteButton();
        };

        const updateQuoteQty = (productId, stem, qty) => {
            const quoteKey = `${productId}-${stem}`;
            if (qty > 0) {
                quote[quoteKey] = { productId: String(productId), stem: parseInt(stem), qty: parseInt(qty) };
            } else {
                delete quote[quoteKey];
            }
            saveCart();
            updateQuoteButton();
        };

        const getQuoteQty = (productId, stem) => {
            const quoteKey = `${productId}-${stem}`;
            return quote[quoteKey] ? quote[quoteKey].qty : 0;
        };

        const updateQuoteButton = () => {
            const cartContainer = document.getElementById('cartContainer');
            if (!cartContainer) return;
            const cartIcon = cartContainer.querySelector('.cart-icon');
            const cartBadge = document.getElementById('cartBadge');
            
            const quoteItems = Object.values(quote);
            const itemCount = quoteItems.length;
            const totalBoxes = quoteItems.reduce((sum, item) => sum + parseInt(item.qty), 0);
            
            if (itemCount > 0) {
                cartBadge.textContent = itemCount;
                cartBadge.classList.add('visible');
                
                if (totalBoxes >= MOQ_TOTAL_BOXES) {
                    cartIcon.classList.add('active');
                    cartBadge.classList.add('moq-met');
                } else {
                    cartIcon.classList.remove('active');
                    cartBadge.classList.remove('moq-met');
                }
            } else {
                cartBadge.classList.remove('visible');
                cartIcon.classList.remove('active');
                cartBadge.classList.remove('moq-met');
            }
        };
        
        // Navigation button listeners
        document.getElementById('cartContainer').addEventListener('click', () => {
            renderSummaryScreen();
            navigateTo('review');
        });
        document.getElementById('detail-back-btn').addEventListener('click', () => navigateTo('catalog'));
        document.getElementById('summary-close-btn').addEventListener('click', () => navigateTo('catalog'));
        document.getElementById('terms-link').href = TERMS_URL;
        
        // Dynamic Mock Sourcing in Offline Mode to demonstrate UI updates
        const mockOfflineStockByLogistics = (incoterm, date) => {
            let dateHash = 0;
            if (date) {
                for (let i = 0; i < date.length; i++) {
                    dateHash += date.charCodeAt(i);
                }
            }
            
            productsData.forEach(p => {
                p.stock = {};
                p.stemLengths.forEach(stem => {
                    // Create deterministic pseudo-random stock levels
                    const factor = (p.id * stem + dateHash + (incoterm === 'FOB Quito' ? 7 : 3)) % 5;
                    if (factor === 0) {
                        p.stock[stem] = 0; // Out of stock
                    } else if (factor === 1) {
                        p.stock[stem] = 5;
                    } else if (factor === 2) {
                        p.stock[stem] = 12;
                    } else if (factor === 3) {
                        p.stock[stem] = 20;
                    } else {
                        p.stock[stem] = 35;
                    }
                });
            });
            console.log(`Mocked offline catalog stock levels for ${incoterm} on ${date}.`);
        };

        // Dynamically load catalog from Apps Script webapp (With Smart Session & Memory Caching)
        const catalogDataCache = {};
        const getCacheKey = (incoterm, date) => `${incoterm || 'DEFAULT'}_${date || 'DEFAULT'}`;

        const fetchCatalogBackground = async (incoterm, date, cacheKey) => {
            try {
                const url = `${GOOGLE_SCRIPT_URL}?incoterms=${encodeURIComponent(incoterm)}&date=${encodeURIComponent(date)}&t=${new Date().getTime()}`;
                const response = await fetch(url);
                if (response.ok) {
                    const data = await response.json();
                    if (Array.isArray(data) && data.length > 0) {
                        catalogDataCache[cacheKey] = data;
                        try { sessionStorage.setItem(`CATALOG_CACHE_${cacheKey}`, JSON.stringify(data)); } catch(e){}
                        productsData = data;
                        renderCatalog();
                    }
                }
            } catch (e) {}
        };

        const loadCatalogData = async (incoterm, date) => {
            const cacheKey = getCacheKey(incoterm, date);
            
            // 1. Instant Memory Cache Check (0 ms)
            if (catalogDataCache[cacheKey] && catalogDataCache[cacheKey].length > 0) {
                productsData = catalogDataCache[cacheKey];
                offlineMode = false;
                if (document.getElementById('offline-warning-bar')) {
                    document.getElementById('offline-warning-bar').style.display = 'none';
                }
                renderCatalog();
                fetchCatalogBackground(incoterm, date, cacheKey);
                return;
            }
            
            // 2. Instant Session Storage Cache Check (0 ms)
            try {
                const stored = sessionStorage.getItem(`CATALOG_CACHE_${cacheKey}`);
                if (stored) {
                    const parsed = JSON.parse(stored);
                    if (Array.isArray(parsed) && parsed.length > 0) {
                        catalogDataCache[cacheKey] = parsed;
                        productsData = parsed;
                        offlineMode = false;
                        if (document.getElementById('offline-warning-bar')) {
                            document.getElementById('offline-warning-bar').style.display = 'none';
                        }
                        renderCatalog();
                        fetchCatalogBackground(incoterm, date, cacheKey);
                        return;
                    }
                }
            } catch(e) {}

            // 3. Initial Blocking Load (Hitting Server CacheService in < 500 ms)
            const overlayText = loadingOverlay.querySelector('p');
            if (overlayText) overlayText.textContent = "Loading catalog & availability...";
            loadingOverlay.classList.add('visible');
            
            try {
                const url = `${GOOGLE_SCRIPT_URL}?incoterms=${encodeURIComponent(incoterm)}&date=${encodeURIComponent(date)}&t=${new Date().getTime()}`;
                const response = await fetch(url);
                if (response.ok) {
                    const data = await response.json();
                    if (Array.isArray(data) && data.length > 0) {
                        productsData = data;
                        catalogDataCache[cacheKey] = data;
                        try { sessionStorage.setItem(`CATALOG_CACHE_${cacheKey}`, JSON.stringify(data)); } catch(e){}
                        offlineMode = false;
                        if (document.getElementById('offline-warning-bar')) {
                            document.getElementById('offline-warning-bar').style.display = 'none';
                        }
                        console.log("Live B2B catalog loaded successfully from Apps Script.");
                    } else {
                        throw new Error("Invalid catalog format");
                    }
                } else {
                    throw new Error("Server responded with error code");
                }
            } catch (error) {
                console.warn("Failed to load live catalog. Falling back to offline mode.", error);
                productsData = PRODUCTS;
                offlineMode = true;
                if (document.getElementById('offline-warning-bar')) {
                    document.getElementById('offline-warning-bar').style.display = 'block';
                }
                mockOfflineStockByLogistics(incoterm, date);
            } finally {
                loadingOverlay.classList.remove('visible');
                if (overlayText) overlayText.textContent = "Submitting Request...";
                renderCatalog(); // CRITICAL: Always execute renderCatalog in finally block!
            }
        };

        // --- 10. LOGISTICS GATEKEEPER MODAL LOGIC ---
        const logisticsModal = document.getElementById('logistics-modal-overlay');
        const modalIncoterms = document.getElementById('modal-incoterms');
        const modalDeliveryDate = document.getElementById('modal-delivery-date');
        const modalEnterBtn = document.getElementById('modal-enter-catalog-btn');
        const changeLogisticsBtn = document.getElementById('change-logistics-btn');
        const logisticsSummaryBar = document.getElementById('logistics-summary-bar');
        
        const logisticsBadgeIncoterm = document.getElementById('logistics-badge-incoterm');
        const logisticsBadgeDate = document.getElementById('logistics-badge-date');

        let selectedIncoterm = '';
        let selectedDate = '';

        const setupModalDatePicker = () => {
            const now = new Date();
            const minDate = new Date(now);
            const yyyy = minDate.getFullYear();
            const mm = String(minDate.getMonth() + 1).padStart(2, '0');
            const dd = String(minDate.getDate()).padStart(2, '0');
            modalDeliveryDate.min = `${yyyy}-${mm}-${dd}`;
            deliveryDateInput.min = `${yyyy}-${mm}-${dd}`;
        };

        const formatDate = (dateStr) => {
            if (!dateStr) return '-';
            const parts = dateStr.split('-');
            if (parts.length !== 3) return dateStr;
            const dateObj = new Date(parts[0], parts[1] - 1, parts[2]);
            return dateObj.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
        };

        // ── DOOR DEL FEATURE FLAG ENFORCEMENT ─────────────────────────────────
        // Hides all 'Delivery to Destination' options from every dropdown
        // when DOOR_DEL_ENABLED is false. Does NOT remove any code or logic.
        // To re-enable: set DOOR_DEL_ENABLED = true in CONFIGURATION above.
        function initDoorDelVisibility() {
            if (DOOR_DEL_ENABLED) return; // Nothing to do — option is visible
            // Hide DOOR DEL option from every <select> in the page
            document.querySelectorAll('option[value="DOOR DEL"]').forEach(opt => {
                opt.disabled = true;
                opt.style.display = 'none';
            });
            // Safety guard: if any select already has DOOR DEL selected
            // (e.g. from session storage), fall back to CIF MIA
            document.querySelectorAll('select').forEach(sel => {
                if (sel.value === 'DOOR DEL') {
                    sel.value = 'CIF MIA';
                    // Fire onchange so any dependent UI (banner, MOQ) updates
                    sel.dispatchEvent(new Event('change'));
                }
            });
            // Also hide the info banner itself since DOOR DEL is disabled
            const banner = document.getElementById('door-del-info-banner');
            if (banner) banner.style.display = 'none';
        }
        // ───────────────────────────────────────────────────────────────────────

        window.toggleDoorDelInfoBanner = function(val) {
              const banner = document.getElementById('door-del-info-banner');
              if (banner) {
                  banner.style.display = (val === 'DOOR DEL') ? 'block' : 'none';
              }
        };

        function applyLogisticsSettings(incoterm, date) {
              let label = 'Miami Warehouse Pick-Up';
              if (incoterm === 'DOOR DEL') label = 'Delivery to Destination (Door-to-Door)';
              else if (incoterm === 'FOB Quito') label = 'FOB Quito (Origin Airport)';
              
              logisticsBadgeIncoterm.textContent = label;
              logisticsBadgeDate.textContent = formatDate(date);
              
              logisticsSummaryBar.style.display = 'flex';
        }

        const openLogisticsModal = () => {
            // Ensure brand hero is visible when opening logistics modal
            const brandHeroEl = document.getElementById('catalog-brand-hero');
            if (brandHeroEl) {
                brandHeroEl.style.display = 'block';
            }

            setupModalDatePicker();
            if (selectedIncoterm) modalIncoterms.value = selectedIncoterm;
            if (selectedDate) modalDeliveryDate.value = selectedDate;
            logisticsModal.style.display = 'flex';
            // Enforce feature flag every time the modal opens
            initDoorDelVisibility();
        };

        const saveLogistics = () => {
            const incoterm = modalIncoterms.value;
            const date = modalDeliveryDate.value;
            
            if (!incoterm || !date) {
                alert("Please select both Incoterms and a shipping date.");
                return;
            }
            
            if (selectedIncoterm !== '' && (selectedIncoterm !== incoterm || selectedDate !== date)) {
                if(Object.keys(quote).length > 0) {
                     alert("Notice: Changing Logistics Terms clears your current shopping cart as availability and pricing may differ.");
                     quote = {};
                     updateQuoteButton();
                     renderSummaryScreen();
                }
            }
            
            selectedIncoterm = incoterm;
            selectedDate = date;
            saveCart();
            
            applyLogisticsSettings(incoterm, date);
            // Smoothly collapse brand hero on catalog entry for maximum inventory viewing area
            const brandHeroEl = document.getElementById('catalog-brand-hero');
            if (brandHeroEl) {
                brandHeroEl.style.display = 'none';
            }

            
            document.getElementById('incoterms').value = incoterm;
            document.getElementById('delivery-date').value = date;
            
            logisticsModal.style.display = 'none';
            loadCatalogData(incoterm, date);
        };

        modalEnterBtn.addEventListener('click', saveLogistics);
        changeLogisticsBtn.addEventListener('click', openLogisticsModal);

        // --- 11. INITIAL LOAD ---
        loadUserInfoFromLocalStorage(); 
        loadCartFromSessionStorage(); // CHANGED TO SESSION STORAGE
        setupDatePicker(); // Calculate Min Date
        
        // Initial setup for date constraints
        setupModalDatePicker();

        // Always show logistics modal on fresh load
        openLogisticsModal();

        // Expose private closure variables/functions to window for browser developer console testing
        Object.defineProperty(window, 'offlineMode', {
            get: () => offlineMode,
            set: (val) => { offlineMode = val; }
        });
        Object.defineProperty(window, 'productsData', {
            get: () => productsData,
            set: (val) => { productsData = val; }
        });
        window.renderCatalog = renderCatalog;
        window.renderDetailScreen = renderDetailScreen;
        window.openLogisticsModal = openLogisticsModal;
        window.loadCatalogData = loadCatalogData;

        // Apply DOOR DEL feature flag on initial page load
        initDoorDelVisibility();
    });
    </script>
</body>
</html>