/* ==========================================================================
   Digilex Search — default stil.
   Sve boje/razmaci su CSS varijable; override-uj ih u Customizer > Additional CSS
   (npr. .ds-search { --ds-accent: #c00; }) bez diranja plugina.
   ========================================================================== */
.ds-search {
    --ds-accent: #ba936b;
    --ds-text: #2b2b2b;
    --ds-muted: #888;
    --ds-border: #e3e3e3;
    --ds-bg: #fff;
    --ds-radius: 8px;
    --ds-shadow: 0 10px 30px rgba(0, 0, 0, .12);

    position: relative;
    width: 100%;
    max-width: 520px;
    font-family: inherit;
}

/* --- Polje --- */
.ds-search__field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    overflow: hidden;
    background: var(--ds-bg);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-search__field:focus-within {
    border-color: var(--ds-accent);
    box-shadow: 0 0 0 3px rgba(186, 147, 107, .18);
}
.ds-search__input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    padding: 12px 16px;
    font-size: 15px;
    color: var(--ds-text);
    background: transparent;
    width: 100%;
}
.ds-search__input::placeholder { color: var(--ds-muted); }
.ds-search__submit {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 0 16px;
    background: var(--ds-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s ease;
}
.ds-search__submit:hover { filter: brightness(.92); }

/* --- Dropdown --- */
.ds-search__dropdown {
    position: absolute;
    z-index: 9999;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--ds-bg);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow);
    overflow: hidden;
    max-height: 70vh;
    overflow-y: auto;
}
.ds-dd__list { list-style: none; margin: 0; padding: 6px; }
.ds-dd__item { margin: 0; }
.ds-dd__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ds-text);
}
.ds-dd__link:hover { background: rgba(186, 147, 107, .10); }
.ds-dd__media {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
}
.ds-dd__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-dd__body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ds-dd__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-dd__sku { font-size: 11px; color: var(--ds-muted); letter-spacing: .03em; }
.ds-dd__price { font-size: 13px; color: var(--ds-accent); font-weight: 600; }
.ds-dd__price del { color: var(--ds-muted); font-weight: 400; margin-right: 5px; }

.ds-dd__all {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--ds-accent);
    text-decoration: none;
}
.ds-dd__all:hover { filter: brightness(.92); }

.ds-dd__empty,
.ds-dd__loading { padding: 16px; font-size: 14px; color: var(--ds-muted); text-align: center; }

/* ==========================================================================
   Results stranica
   ========================================================================== */
.ds-results { --ds-cols: 4; --ds-accent: #ba936b; --ds-muted: #888; --ds-border: #e3e3e3; }
.ds-results__count { font-size: 14px; color: var(--ds-muted); margin: 0 0 20px; }
.ds-results__empty { font-size: 16px; color: var(--ds-muted); padding: 40px 0; text-align: center; }

.ds-results__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--ds-cols), 1fr);
    gap: 24px;
}
.ds-card { margin: 0; }
.ds-card__link { display: block; text-decoration: none; color: inherit; }
.ds-card__media {
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}
.ds-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.ds-card__link:hover .ds-card__media img { transform: scale(1.04); }
.ds-card__title { font-size: 15px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; }
.ds-card__sku { display: block; font-size: 11px; color: var(--ds-muted); margin-bottom: 4px; }
.ds-card__price { font-size: 15px; font-weight: 700; color: var(--ds-accent); }
.ds-card__price del { color: var(--ds-muted); font-weight: 400; margin-right: 6px; }

.ds-results__pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; justify-content: center; }
.ds-page {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--ds-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--ds-text, #2b2b2b);
    font-size: 14px;
}
.ds-page:hover { border-color: var(--ds-accent); }
.ds-page.is-active { background: var(--ds-accent); border-color: var(--ds-accent); color: #fff; }

/* --- Responsive grid --- */
@media (max-width: 1024px) { .ds-results__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 782px)  { .ds-results__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .ds-results__grid { grid-template-columns: repeat(2, 1fr); } }