/* =============================================================
   shopfinder.css
   Basis-Styles – an Theme anpassen
   ============================================================= */

/* ── CSS-Variablen ─────────────────────────────────────────── */
:root {
    --sf-accent        : var(--brand-primary);      
    --sf-text          : #1a1a1a;
    --sf-muted         : #888;
    --sf-bg            : #f9f7f4;
    --sf-pill-bg       : #efefef;
    --sf-pill-active   : var(--sf-accent);
    --sf-pill-radius   : 999px;
    --sf-highlight     : var(--sf-accent);
    --sf-dim-opacity   : 0.28;
    --sf-transition    : 0.22s ease;
    --sf-font-display  : 'Georgia', serif;
    --sf-font-body     : system-ui, sans-serif;
}

/* ── Wrapper ───────────────────────────────────────────────── */
.shopfinder {
    font-family : var(--sf-font-body);
    color       : var(--sf-text);
    max-width   : 1200px;
    margin      : 0 auto;
    padding     : 2rem 1rem;
}

/* ── Filter-Navigation ─────────────────────────────────────── */
.finder_nav {
    display    : flex;
    flex-wrap  : wrap;
    gap        : .5rem;
    margin-bottom : 1.5rem;
}

.finder_nav_pill {
    background    : var(--sf-pill-bg);
    border        : none;
    border-radius : var(--sf-pill-radius);
    padding       : .45rem 1.1rem;
    font-size     : .85rem;
    font-family   : var(--sf-font-body);
    cursor        : pointer;
    color         : var(--sf-text);
    transition    : background var(--sf-transition), color var(--sf-transition);
    line-height   : 1;
}

.finder_nav_pill:hover,
.finder_nav_pill:focus-visible {
    background : #ddd;
    outline    : none;
}

.finder_nav_pill.is-active {
    background : var(--sf-pill-active);
    color      : #fff;
    font-weight: 600;
}





/* ── LISTENANSICHT ─────────────────────────────────────────── */

/* Isotope-Grid */
.finder_grid {
    /* Isotope übernimmt Positionierung – kein zusätzliches flex/grid hier */
}

/* Buchstabengruppe */
.finder_grid_item {
    width         : 100%;
    margin-bottom : 2.75rem;
    break-inside  : avoid;
}

@media ( min-width: 640px ) {
    .finder_grid_item { width: 50%; padding-right: 2rem; }
}
@media ( min-width: 900px ) {
    .finder_grid_item { width: 33.333%; }
}




/* Shop-Links in der Liste */
.finder_grid_text {
    display       : flex;
    flex-direction: column;
    gap           : .25rem;
}


.finder_shop_link:hover {
    color : var(--sf-accent);
    text-decoration: underline;
}

/* Versteckte Elemente (JS setzt .is-hidden) */
.finder_shop_link.is-hidden {
    display : none;
}

.finder_grid_item.is-hidden {
    /* Isotope filtert via JS – Klasse nur für Logik */
    visibility : hidden;
    pointer-events: none;
}

/* ── LAGEPLANANSICHT ───────────────────────────────────────── */




/* Shop-Link im Lageplan */
.lageplan_shop_link {
  
    transition     : opacity var(--sf-transition),
                     border-color var(--sf-transition),
                     background var(--sf-transition),
                     box-shadow var(--sf-transition);
}



/* Logo im Lageplan */
.lageplan_logo {
    width        : 36px;
    height       : 36px;
    object-fit   : contain;
    border-radius: 4px;
    flex-shrink  : 0;
}

.rechts .lageplan_shop_name {
    
}


/* Hervorhebungs-Zustände (Lageplan-Filter) */
.lageplan_shop_link {
    border-bottom: 1px solid white;
}
.lageplan_col--links .lageplan_shop_link.is-highlighted {
    background: linear-gradient(272deg,var(--neutral-100) 0%, rgba(255, 255, 255, 1) 100%);
}
.lageplan_col--rechts .lageplan_shop_link.is-highlighted {
    background: linear-gradient(90deg,var(--neutral-100) 0%, rgba(255, 255, 255, 1) 100%);
}


.lageplan_shop_link.is-dimmed {
    opacity        : var(--sf-dim-opacity);
    pointer-events : none;
}

/* ── Accessibility: versteckte View via [hidden] ───────────── */
[hidden] { display: none !important; }

/* ── Isotope: verhindert Flackern beim Init ────────────────── */
.finder_grid { position: relative; }