/* =========================================================
   VS SHOP DIRECTORY — Shared clean UI
   ========================================================= */

.vsd-directory {
    --vsd-text:#171717;
    --vsd-muted:#777;
    --vsd-border:#e7e7e7;
    width:100%;
    color:var(--vsd-text);
    font-family:inherit;
    box-sizing:border-box;
}

.vsd-directory *,
.vsd-directory *::before,
.vsd-directory *::after {
    box-sizing:border-box;
}

/* Heading */
.vsd-heading {
    margin:0 0 22px;
}
.vsd-heading h2 {
    margin:0;
    font-size:30px;
    line-height:1.2;
    font-weight:600;
    letter-spacing:-.02em;
}
.vsd-heading p {
    margin:6px 0 0;
    color:var(--vsd-muted);
    font-size:14px;
    line-height:1.5;
}

/* Search */
.vsd-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 18px;
}
.vsd-search {
    position:relative;
    width:100%;
    max-width:500px;
}
.vsd-search-input {
    display:block!important;
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 42px!important;
    border:1px solid #ddd!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#222!important;
    outline:none!important;
    box-shadow:none!important;
    font-family:inherit!important;
    font-size:14px!important;
    line-height:48px!important;
}
.vsd-search-input:focus {
    border-color:#999!important;
    box-shadow:0 0 0 2px rgba(0,0,0,.04)!important;
}
.vsd-search-icon {
    position:absolute!important;
    left:14px!important;
    top:50%!important;
    width:17px!important;
    height:17px!important;
    transform:translateY(-50%)!important;
    color:#777!important;
    pointer-events:none!important;
}
.vsd-search-icon circle {
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}
.vsd-search-icon path {
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}
.vsd-clear {
    display:none!important;
    position:absolute!important;
    right:9px!important;
    top:50%!important;
    width:28px!important;
    height:28px!important;
    min-height:28px!important;
    transform:translateY(-50%)!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#f1f1f1!important;
    color:#555!important;
    box-shadow:none!important;
    cursor:pointer!important;
    font-size:17px!important;
}
.vsd-clear.is-visible {
    display:block!important;
}
.vsd-count {
    color:#777;
    font-size:13px;
    white-space:nowrap;
}
.vsd-count-number {
    color:#333;
    font-weight:600;
}

/* Alphabet */
.vsd-alphabet {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;
    margin:0 0 22px;
    padding:0 0 15px;
    border-bottom:1px solid #eee;
}
.vsd-letter {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:32px!important;
    min-width:32px!important;
    height:32px!important;
    min-height:32px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:6px!important;
    background:transparent!important;
    color:#555!important;
    box-shadow:none!important;
    outline:none!important;
    font-family:inherit!important;
    font-size:13px!important;
    font-weight:500!important;
    line-height:32px!important;
    cursor:pointer!important;
    transition:background .15s ease,color .15s ease;
}
.vsd-letter:hover {
    background:#f3f3f3!important;
    color:#111!important;
}
.vsd-letter.active {
    background:#222!important;
    color:#fff!important;
}
.vsd-mobile-filter {
    display:none;
}

/* Grid */
.vsd-grid {
    display:grid;
    grid-template-columns:repeat(var(--vsd-columns-desktop),minmax(0,1fr));
    gap:var(--vsd-gap);
}

/* Card */
.vsd-card {
    min-width:0;
    min-height:var(--vsd-card-height);
    padding:20px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border:1px solid #e8e8e8!important;
    border-radius:var(--vsd-radius)!important;
    background:#fff!important;
    color:#222!important;
    text-decoration:none!important;
    box-shadow:none!important;
    overflow:hidden;
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.vsd-card:hover {
    transform:translateY(-2px);
    border-color:#d5d5d5!important;
    box-shadow:0 7px 18px rgba(0,0,0,.055)!important;
}
.vsd-card[hidden] {
    display:none!important;
}

/* Image/logo */
.vsd-media {
    width:var(--vsd-media-size);
    height:var(--vsd-media-size);
    margin:0 0 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid #f0f0f0;
    border-radius:10px;
    background:#f7f7f7;
    flex:0 0 auto;
}
.vsd-media img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    padding:8px!important;
    object-fit:contain!important;
}
.vsd-placeholder {
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    color:#aaa;
    background:#f5f5f5;
    font-size:28px;
    font-weight:500;
}

/* Text */
.vsd-name {
    width:100%;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#222!important;
    font-size:14px!important;
    line-height:1.4!important;
    font-weight:500!important;
    overflow-wrap:anywhere;
}
.vsd-products {
    margin-top:5px;
    color:#999;
    font-size:11px;
}

/* Empty/error */
.vsd-no-results {
    display:none;
    padding:60px 20px;
    text-align:center;
    color:#777;
}
.vsd-no-results.is-visible {
    display:block;
}
.vsd-no-results strong {
    display:block;
    margin-bottom:6px;
    color:#222;
}
.vsd-no-results span {
    font-size:13px;
}
.vsd-error {
    padding:18px;
    border:1px solid #f0cccc;
    border-radius:8px;
    background:#fff5f5;
    color:#a00;
}

/* Tablet */
@media (max-width:1200px) {
    .vsd-grid {
        grid-template-columns:repeat(var(--vsd-columns-tablet),minmax(0,1fr));
    }
}

/* Mobile */
@media (max-width:767px) {
    .vsd-heading h2 {
        font-size:26px;
    }

    .vsd-toolbar {
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }

    .vsd-search {
        max-width:none;
    }

    .vsd-count {
        padding-left:2px;
    }

    .vsd-alphabet {
        display:none!important;
    }

    .vsd-mobile-filter {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin:0 0 18px;
    }

    .vsd-mobile-filter label {
        color:#777;
        font-size:12px;
    }

    .vsd-letter-select {
        width:150px!important;
        height:40px!important;
        min-height:40px!important;
        padding:0 12px!important;
        border:1px solid #ddd!important;
        border-radius:8px!important;
        background:#fff!important;
        color:#222!important;
        box-shadow:none!important;
        outline:none!important;
        font-family:inherit!important;
        font-size:13px!important;
    }

    .vsd-grid {
        grid-template-columns:repeat(var(--vsd-columns-mobile),minmax(0,1fr));
        gap:10px;
    }

    .vsd-card {
        min-height:155px;
        padding:16px 8px;
        border-radius:9px!important;
    }

    .vsd-media {
        width:min(var(--vsd-media-size),64px);
        height:min(var(--vsd-media-size),64px);
        margin-bottom:11px;
    }

    .vsd-name {
        min-height:36px;
        font-size:13px!important;
    }

    .vsd-products {
        font-size:10px;
    }
}

@media (max-width:380px) {
    .vsd-letter-select {
        width:135px!important;
    }

    .vsd-grid {
        gap:8px;
    }

    .vsd-card {
        min-height:145px;
    }

    .vsd-media {
        width:56px;
        height:56px;
    }
}