/* Store Locator — postcode-zoek, lijst + Leaflet-kaart. */

.layer__store-locator {
    padding: var(--space-6) var(--space-5);
    background: var(--color-bg-soft);          /* lichtroze paneel, zoals andere lagen */
    border-radius: var(--radius-lg, 14px);
    --store-pin: var(--color-primary, #c8902a);
}

.store-locator__title { font-size: var(--fs-h2); font-weight: 300; line-height: var(--line-tight); margin: 0 0 var(--space-2); }
.store-locator__intro { margin: 0 0 var(--space-4); max-width: 48rem; color: color-mix(in srgb, currentColor 75%, transparent); }

.store-locator__search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.store-locator__search-name  { flex: 1 1 16rem; min-width: 0; }            /* naam/plaats: groeit */
.store-locator__name-input   { width: 100%; box-sizing: border-box; }
.store-locator__search-field { flex: 0 1 18rem; min-width: 0; }            /* postcode+afstand: compacter */
.store-locator__search .mm-composite-row { display: flex; gap: var(--space-2); }

/* Alle zoekvelden strak gelijktrekken: naam-, postcode-input én afstand-select
   krijgen dezelfde rand/radius/hoogte (onafhankelijk van composite.css). De
   knoppen even hoog, zodat de hele balk netjes op één lijn ligt. */
.store-locator__search .mm-composite-input {
    min-height: 2.75rem;
    padding: .5rem .75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-fg);
    font: inherit;
    box-sizing: border-box;
}
.store-locator__search .mm-composite-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.store-locator__search .button {
    min-height: 2.75rem;
}
/* Onzichtbare submit: zoeken gaat realtime (JS), maar de knop blijft in de DOM
   zodat Enter + no-JS de form-GET nog indienen. */
.store-locator__submit-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* Afstand-dropdown (custom-select display) even hoog als de inputs. */
.store-locator__search .mm-select-display {
    min-height: 2.75rem;
    box-sizing: border-box;
}

.store-locator__body {
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) 1fr;
    gap: var(--space-4);
    align-items: start;
}

.store-locator__results {
    max-height: 32rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    padding-right: var(--space-2);
}

.store-locator__map {
    height: 32rem;
    border-radius: var(--radius-md, 0.6rem);
    overflow: hidden;
    background: color-mix(in srgb, currentColor 6%, transparent);
}
.store-locator__map .leaflet-container { height: 100%; width: 100%; font: inherit; }

/* Merk-pin (divIcon): geen Leaflet-witvlak, eigen drop-shadow. */
.store-pin { background: none; border: none; }
.store-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }

.store-locator__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.store-locator__empty { color: color-mix(in srgb, currentColor 60%, transparent); padding: var(--space-3) 0; }

.store-locator__item {
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: var(--radius-md, 0.6rem);
    /* Iets minder verticale padding zodat 3 volledige kaartjes in de 32rem-
       resultatenkolom passen (onderste rand blijft zichtbaar). */
    padding: var(--space-2) var(--space-3);
    cursor: pointer;                       /* klik → centreer op de kaart */
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.store-locator__item:hover { border-color: color-mix(in srgb, var(--color-primary, #c8902a) 45%, transparent); }
.store-locator__item.is-active {
    border-color: var(--color-primary, #c8902a);
    background: color-mix(in srgb, var(--color-primary, #c8902a) 8%, transparent);
}
.store-locator__item-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.store-locator__name { font-size: 1rem; margin: 0; }
.store-locator__distance {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-primary, #c8902a);
    background: color-mix(in srgb, var(--color-primary, #c8902a) 12%, transparent);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.store-locator__address { margin: 0.2rem 0 0; color: color-mix(in srgb, currentColor 70%, transparent); font-size: 0.9rem; }
.store-locator__meta { display: flex; flex-wrap: wrap; gap: 0.3rem var(--space-2); margin-top: var(--space-1); font-size: 0.85rem; }
.store-locator__link { color: var(--color-primary, #c8902a); text-decoration: none; }
.store-locator__link:hover { text-decoration: underline; }
.store-locator__hours { margin: var(--space-1) 0 0; font-size: 0.8rem; white-space: pre-line; color: color-mix(in srgb, currentColor 65%, transparent); }

@media (max-width: 64rem) {
    .store-locator__body { grid-template-columns: 1fr; }
    .store-locator__map { height: 22rem; order: -1; }      /* kaart bovenaan op smal */
    .store-locator__results { max-height: none; }
}