/* ── Zimtstern Store Locator — Frontend ── */

.zst-wrap {
    --zst-bg:         #0e0e0e;
    --zst-surface:    #161616;
    --zst-border:     #2a2a2a;
    --zst-border-lt:  #333;
    --zst-text:       #e8e4df;
    --zst-muted:      #8a8580;
    --zst-accent:     #e70b55;
    --zst-accent-dim: rgba(231,11,85,.08);
    --zst-online:     #00c896;
    --zst-radius:     10px;
    font-family: 'DM Sans', sans-serif;
    color: var(--zst-text);
    -webkit-font-smoothing: antialiased;
}

/* ── Hero ── */
.zst-hero {
    padding: 60px 20px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.zst-hero::before {
    content: '';
    position: absolute;
    top: -120px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(231,11,85,.06) 0%, transparent 70%);
    pointer-events: none;
}
.zst-hero h2 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 10px;
    color: var(--zst-text);
}
.zst-hero h2 em { color: var(--zst-accent); font-style: italic; }
.zst-hero p {
    color: var(--zst-muted);
    font-size: 1.05rem;
    max-width: 460px;
    margin: 0 auto 30px;
    font-weight: 300;
}

/* ── Search ── */
.zst-search-wrap {
    max-width: 480px;
    margin: 0 auto 20px;
    position: relative;
}
.zst-search-wrap svg {
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--zst-muted);
    pointer-events: none;
}
.zst-search-wrap input.zst-input {
    width: 100%;
    padding: 14px 16px 14px 46px;
    background: var(--zst-surface);
    border: 1px solid var(--zst-border);
    border-radius: 60px;
    color: var(--zst-text);
    font-family: inherit;
    font-size: .95rem;
    outline: none;
    transition: border-color .2s;
}
.zst-search-wrap input.zst-input::placeholder { color: var(--zst-muted); }
.zst-search-wrap input.zst-input:focus { border-color: var(--zst-accent); }

/* ── Filters ── */
.zst-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 40px;
}
.zst-filters button {
    padding: 8px 20px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zst-muted);
    background: transparent;
    border: 1px solid var(--zst-border);
    border-radius: 60px;
    cursor: pointer;
    transition: all .25s;
}
.zst-filters button:hover {
    border-color: var(--zst-muted);
    color: var(--zst-text);
}
.zst-filters button.zst-active {
    background: var(--zst-accent);
    color: var(--zst-bg);
    border-color: var(--zst-accent);
}
.zst-filters .zst-cnt {
    font-size: .72rem;
    opacity: .6;
    margin-left: 4px;
}

/* ── Stats ── */
.zst-stats {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 16px;
    font-size: .82rem;
    color: var(--zst-muted);
}
.zst-stats span { color: var(--zst-text); font-weight: 500; }

/* ── Grid ── */
.zst-grid {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px 80px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ── Section label ── */
.zst-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 32px 0 8px;
}
.zst-section:first-child { padding-top: 0; }
.zst-section h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 1.6rem;
    font-weight: 400;
    white-space: nowrap;
    margin: 0;
    color: var(--zst-text);
}
.zst-section .zst-line {
    flex: 1;
    height: 1px;
    background: var(--zst-border);
}
.zst-section .zst-sc {
    font-size: .78rem;
    color: var(--zst-muted);
    white-space: nowrap;
}

/* ── Card ── */
.zst-card {
    background: var(--zst-surface);
    border: 1px solid var(--zst-border);
    border-radius: var(--zst-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    animation: zstUp .45s ease both;
}
.zst-card:hover {
    border-color: var(--zst-border-lt);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
@keyframes zstUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}

.zst-logo {
    height: 48px;
    display: flex;
    align-items: center;
}
.zst-logo img {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .85;
    transition: opacity .2s;
}
.zst-card:hover .zst-logo img { opacity: 1; }
.zst-logo .zst-ph {
    width: 48px; height: 48px;
    border-radius: 8px;
    background: var(--zst-accent-dim);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Instrument Serif', serif;
    font-size: 1.3rem;
    color: var(--zst-accent);
    font-weight: 700;
}

.zst-body { flex: 1; }
.zst-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 6px;
    letter-spacing: -.01em;
}
.zst-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: .78rem;
    color: var(--zst-muted);
}

.zst-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 60px;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.zst-tag-c  { background: rgba(255,255,255,.05); color: var(--zst-muted); }
.zst-tag-c .zst-fl { font-style: normal; font-size: .85rem; }
.zst-tag-z  { background: rgba(255,255,255,.04); color: var(--zst-muted); }
.zst-tag-o  { background: rgba(0,200,150,.1);    color: var(--zst-online); }
.zst-tag-o::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--zst-online);
}

a.zst-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--zst-bg);
    background: var(--zst-accent);
    border: none;
    border-radius: 60px;
    text-decoration: none;
    transition: filter .2s, transform .15s;
    align-self: flex-start;
}
a.zst-link:hover { filter: brightness(1.1); transform: scale(1.03); color: var(--zst-bg); }
a.zst-link svg { width: 14px; height: 14px; }

/* ── Empty ── */
.zst-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: var(--zst-muted);
}
.zst-empty svg { margin-bottom: 16px; opacity: .3; }
.zst-empty p  { font-size: 1.05rem; }
.zst-empty .zst-sub { font-size: .85rem; margin-top: 6px; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .zst-grid { grid-template-columns: 1fr; gap: 12px; }
}