.elementor-4555 .elementor-element.elementor-element-aaada8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}.elementor-4555 .elementor-element.elementor-element-a4b2481 .elementor-heading-title{color:var( --e-global-color-secondary );font-family:"Poppins", Sans-serif;font-size:55px;font-weight:700;line-height:85px;}.elementor-4555 .elementor-element.elementor-element-a4b2481 > .elementor-widget-container{margin:15px 0px 0px 0px;}.elementor-4555 .elementor-element.elementor-element-a17a661{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;--margin-top:16px;--margin-bottom:0px;--margin-left:0px;--margin-right:1px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4555 .elementor-element.elementor-element-6ca674e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--background-transition:0.3s;}@media(max-width:767px){.elementor-4555 .elementor-element.elementor-element-a4b2481 .elementor-heading-title{font-size:26px;line-height:2em;}}@media(min-width:768px){.elementor-4555 .elementor-element.elementor-element-aaada8b{--content-width:1800px;}}/* Start custom CSS for container, class: .elementor-element-a17a661 */<!-- Main store locator container -->
<div class="store-locator-container">
    
    <!-- Left sidebar with store list -->
    <div class="store-list-sidebar">
        
        <!-- Search section -->
        <div class="search-section">
            <input type="text" placeholder="Location Search" id="location-search">
            <div class="advanced-search-toggle">Advanced Search ▼</div>
        </div>
        
        <!-- Store list -->
        <div class="store-list">
            
            <!-- Individual store item -->
            <div class="store-item" data-store-id="1">
                <div class="store-name">BUCO Strijdompark</div>
                <div class="store-address">
                    Fruits Rd<br>
                    Sonneglans<br>
                    Randburg<br>
                    2169
                </div>
                <div class="store-distance">9 KM</div>
                <div class="store-phone">011 060 1950</div>
                <div class="store-hours">OPEN 7:30 AM - 5:00 PM ▼</div>
                <a href="#" class="store-details-link">View Store Details</a>
            </div>
            
            <!-- Additional store items -->
            <div class="store-item" data-store-id="2">
                <div class="store-name">BUCO Honeydew</div>
                <div class="store-address">
                    Ridge Rd<br>
                    Roodepoort<br>
                    Johannesburg<br>
                    2040
                </div>
                <div class="store-distance">13 KM</div>
                <div class="store-phone">011 795 3733</div>
                <div class="store-hours">OPEN 7:00 AM - 5:00 PM ▼</div>
                <a href="#" class="store-details-link">View Store Details</a>
            </div>
            
            <!-- More store items... -->
            
        </div>
    </div>
    
    <!-- Right side map container -->
    <div class="map-container">
        <div id="store-locator-map" class="store-locator-map">
            <!-- Your map implementation goes here -->
            <!-- This could be Google Maps, Leaflet, or whatever mapping solution you're using -->
        </div>
    </div>
    
</div>/* End custom CSS */