.store-locator {
    --sl-sidebar-width: 360px;
    --sl-sidebar-min: 260px;
    --sl-gap: 16px;
    --sl-controls-gap: 8px;
    --sl-row-gap: 8px;
    --sl-map-height: 540px;
    --sl-map-height-mobile: 420px;
    --sl-panel-height: 540px;
    --sl-card-padding: 12px;
    --sl-card-radius: 10px;
    --sl-card-border: #e6e6e6;
    --sl-card-bg: #fff;
    --sl-primary: #111;
    --sl-primary-text: #fff;
    --sl-alpha-btn-size: 34px;
    --sl-alpha-btn-radius: 6px;
    --sl-alpha-btn-border: #d8d8d8;
    --sl-alpha-gap: 6px;
    --sl-grid-gap: 12px;
    --sl-grid-cols-desktop: 3;
    --sl-grid-cols-tablet: 2;
    --sl-grid-cols-mobile: 1
}

.store-locator .sl-layout {
    display: grid;
    grid-template-columns: minmax(var(--sl-sidebar-min), var(--sl-sidebar-width)) 1fr;
    gap: var(--sl-gap);
    align-items: start
}

.store-locator .sl-controls {
    display: flex;
    flex-direction: column;
    gap: var(--sl-controls-gap)
}

.store-locator .sl-row {
    display: flex;
    gap: var(--sl-row-gap);
    flex-wrap: wrap
}

.store-locator .sl-row input {
    flex: 1;
    min-width: 220px
}

.store-locator #sl-map {
    height: var(--sl-map-height)
}

.store-locator .sl-panel {
    max-height: var(--sl-panel-height);
    overflow: auto
}

.store-locator .sl-card {
    padding: var(--sl-card-padding);
    border: 1px solid var(--sl-card-border);
    border-radius: var(--sl-card-radius);
    margin-bottom: 10px;
    background: var(--sl-card-bg)
}

.store-locator .sl-store-card {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.store-locator .sl-store-top {
    display: flex;
    gap: 10px;
    align-items: flex-start
}

.store-locator .sl-store-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--sl-card-border);
    color: var(--sl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto
}

.store-locator .sl-store-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2
}

.store-locator .sl-store-address {
    color: #4b5563;
    font-size: 13px
}

.store-locator .sl-store-links {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
}

.store-locator .sl-store-links a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    font-size: 13px
}

.store-locator .sl-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px
}

.store-locator .sl-dot {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #9ca3af
}

.store-locator .sl-dot.is-open {
    background: #16a34a
}

.store-locator .sl-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    border-radius: 999px;
    background: var(--sl-primary);
    color: var(--sl-primary-text);
    font-weight: 700;
    text-decoration: none
}

.store-locator .sl-btn-primary:hover {
    filter: brightness(.95)
}

.store-locator .sl-alpha {
    margin-top: 18px
}

.store-locator .sl-alpha-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-alpha-gap);
    margin-bottom: 12px
}

.store-locator .sl-alpha-btn {
    width: var(--sl-alpha-btn-size);
    height: var(--sl-alpha-btn-size);
    border: 1px solid var(--sl-alpha-btn-border);
    border-radius: var(--sl-alpha-btn-radius);
    background: var(--sl-card-bg);
    font-weight: 600;
    cursor: pointer
}

.store-locator .sl-alpha-btn[disabled] {
    opacity: .35;
    cursor: not-allowed
}

.store-locator .sl-alpha-btn.is-active {
    background: var(--sl-primary);
    border-color: var(--sl-primary);
    color: var(--sl-primary-text)
}

.store-locator .sl-alpha-grid {
    display: grid;
    grid-template-columns: repeat(var(--sl-grid-cols-desktop), minmax(0, 1fr));
    gap: var(--sl-grid-gap)
}

@media (max-width:900px) {
    .store-locator .sl-layout {
        grid-template-columns: 1fr
    }

    .store-locator .sl-panel {
        max-height: none
    }

    .store-locator #sl-map {
        height: var(--sl-map-height-mobile)
    }

    .store-locator .sl-alpha-grid {
        grid-template-columns: repeat(var(--sl-grid-cols-mobile), minmax(0, 1fr))
    }
}

@media (min-width:901px) and (max-width:1200px) {
    .store-locator .sl-alpha-grid {
        grid-template-columns: repeat(var(--sl-grid-cols-tablet), minmax(0, 1fr))
    }
}