/* ============================================================
   SHOP FINDER — interactive map layout (/shops)
   ============================================================ */

body.page-shops main.shops-finder,
body.page-shops .container.shops-finder,
.shops-finder {
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
}

.shops-finder-wrap {
    display: flex;
    height: calc(100vh - 80px);
    min-height: 560px;
    overflow: hidden;
    background: var(--grey-100);
    border-top: 1px solid var(--border-light);
}

/* --- SIDEBAR ---------------------------------------------------- */
.sf-sidebar {
    width: 360px;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-right: 1px solid var(--border-light);
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    z-index: 10;
}

.sf-sidebar.collapsed {
    width: 0;
    min-width: 0;
}

.sf-controls {
    padding: 1rem 1.125rem 0.875rem;
    background: var(--grey-50);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.sf-intro h1 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--grey-900);
}

.sf-intro p {
    margin: 0 0 0.875rem 0;
    font-size: 0.78rem;
    color: var(--grey-600);
    line-height: 1.4;
}

.sf-intro strong { color: var(--primary-color); }

/* Search */
.sf-search-wrap {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.sf-search-input {
    flex: 1;
    padding: 0.6rem 0.875rem;
    border: 1.5px solid var(--border-medium);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--white);
    color: var(--grey-900);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sf-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.sf-search-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.sf-search-btn:hover { background: var(--primary-dark); }

.sf-search-result {
    min-height: 1.1rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--grey-500);
}
.sf-search-result.ok  { color: var(--success-color); }
.sf-search-result.err { color: var(--error-color); }

/* Type chips */
.sf-filter-row {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.sf-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1.5px solid var(--border-medium);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--white);
    color: var(--grey-600);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.sf-chip:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sf-chip.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Fitted toggle */
.sf-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--grey-700);
    cursor: pointer;
    user-select: none;
}

.sf-toggle input { accent-color: var(--primary-color); }

/* List */
.sf-list-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sf-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    position: sticky;
    top: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
    z-index: 1;
}

.sf-list-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--grey-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sf-list-hint {
    font-size: 0.68rem;
    color: var(--grey-400);
}

.sf-cards {
    padding: 0.5rem;
    flex: 1;
}

.sf-card {
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    margin-bottom: 0.3rem;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.12s, border-color 0.12s;
    background: var(--white);
}

.sf-card:hover {
    background: var(--grey-50);
    border-color: var(--border-medium);
}

.sf-card.selected {
    background: #eff6ff;
    border-color: var(--primary-color);
}

.sf-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.sf-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--grey-900);
    line-height: 1.3;
}

.sf-card-badge {
    display: inline-block;
    padding: 0.16rem 0.45rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    flex-shrink: 0;
}

.sf-badge-clothes  { background: #DBEAFE; color: #1E40AF; }
.sf-badge-shoes    { background: #FEF3C7; color: #92400E; }
.sf-badge-tailor   { background: #E0E7FF; color: #3730A3; }
.sf-badge-accessories { background: #FCE7F3; color: #9D174D; }
.sf-badge-boutique { background: #DCFCE7; color: #166534; }
.sf-badge-other    { background: var(--grey-200); color: var(--grey-700); }

.sf-card-loc {
    font-size: 0.76rem;
    color: var(--grey-600);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.sf-card-loc .fas { font-size: 0.7rem; color: var(--grey-500); }

.sf-card-fitted {
    margin-top: 0.35rem;
    font-size: 0.68rem;
    color: var(--secondary-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sf-card-actions { margin-top: 0.5rem; }

.sf-card-link {
    font-size: 0.78rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.sf-card-link:hover { text-decoration: underline; }

.sf-empty {
    text-align: center;
    padding: 2rem 1.25rem;
    color: var(--grey-400);
}

.sf-empty i {
    font-size: 1.75rem;
    margin-bottom: 0.625rem;
    display: block;
}

.sf-empty p {
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.sf-list-wrap::-webkit-scrollbar { width: 4px; }
.sf-list-wrap::-webkit-scrollbar-track { background: transparent; }
.sf-list-wrap::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: 2px; }
.sf-list-wrap::-webkit-scrollbar-thumb:hover { background: var(--grey-400); }

/* --- MAP -------------------------------------------------------- */
.sf-map-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

#sf-map { width: 100%; height: 100%; }

.sf-cluster-icon {
    background: none !important;
    border: none !important;
}

.sf-toggle-btn {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    z-index: 1000;
    width: 38px;
    height: 38px;
    background: var(--white);
    border: none;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    color: var(--grey-700);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.15s, color 0.15s;
}

.sf-toggle-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.sf-popup .leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    background: var(--white);
}

.sf-popup .leaflet-popup-content {
    margin: 0.875rem 1rem;
    line-height: 1.4;
}

/* Mobile sidebar */
@media (max-width: 768px) {
    .shops-finder-wrap {
        height: calc(100vh - 70px);
        position: relative;
    }
    .sf-sidebar {
        width: 100%;
        min-width: 100%;
        height: 55vh;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-right: none;
        border-top: 1px solid var(--border-light);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
        transform: translateY(calc(100% - 80px));
        transition: transform 0.25s ease;
    }
    .sf-sidebar.mobile-open { transform: translateY(0); }
    .sf-map-wrap { height: 100%; }
}

/* ============================================================
   SHOP DETAIL PAGE (/shops/<slug>)
   ============================================================ */
.shop-detail-page { padding-top: var(--space-6); padding-bottom: var(--space-12); }

.shop-detail-page .breadcrumb {
    font-size: var(--text-sm);
    color: var(--grey-500);
    margin-bottom: var(--space-4);
}
.shop-detail-page .breadcrumb a { color: var(--primary-color); text-decoration: none; }
.shop-detail-page .breadcrumb a:hover { text-decoration: underline; }

.shop-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-8);
}

.shop-header h1 {
    color: var(--white);
    font-size: var(--text-3xl);
    margin: var(--space-2) 0 var(--space-3) 0;
}

.shop-type-pill {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: rgba(255,255,255,0.18);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.shop-location {
    color: rgba(255,255,255,0.92);
    font-size: var(--text-base);
    margin: 0;
}

.shop-location .fas { margin-right: var(--space-2); }

.shop-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-8);
}

.shop-description {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    line-height: 1.65;
    color: var(--text-secondary);
}

.shop-description-empty {
    background: var(--grey-50);
    color: var(--grey-600);
    font-style: italic;
}

.shop-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.shop-meta-item {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.shop-meta-item-wide { grid-column: 1 / -1; }

.shop-meta-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grey-500);
    font-weight: 600;
}

.shop-meta-label .fas { margin-right: var(--space-1); color: var(--primary-color); }

.shop-meta-value {
    font-size: var(--text-sm);
    color: var(--grey-800);
    word-break: break-word;
}

.shop-meta-value a { color: var(--primary-color); text-decoration: none; }
.shop-meta-value a:hover { text-decoration: underline; }

.shop-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.shop-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--grey-100);
    color: var(--grey-700);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.shop-tag-accent { background: var(--secondary-light); color: var(--secondary-dark); }

/* Side column */
.shop-side-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.shop-side-card h3 {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--text-lg);
    color: var(--grey-900);
}

#shop-mini-map {
    width: 100%;
    height: 220px;
    border-radius: var(--radius-md);
    background: var(--grey-100);
}

.shop-directions {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.shop-directions:hover { text-decoration: underline; }

.shop-side-links { list-style: none; padding: 0; margin: 0; }
.shop-side-links li { padding: var(--space-1) 0; }
.shop-side-links a { color: var(--primary-color); text-decoration: none; font-size: var(--text-sm); }
.shop-side-links a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .shop-layout { grid-template-columns: 1fr; gap: var(--space-4); }
    .shop-header { padding: var(--space-6) var(--space-4); }
    .shop-header h1 { font-size: var(--text-2xl); }
}