/*!
    ALGOLIA
*/
.search-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.ais-SearchBox-input {
    width: 100%;
    padding: 14px 44px 14px 14px;
    padding-left: 2.5rem !important; /* ← justér efter behov */
    font-size: 15px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

#emptyState {
    margin-top: 12px;
    font-size: 13px;
    opacity: 0.65;
}


/* HIT CARD */
.hit-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 3px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
}

    .hit-card + .hit-card {
        margin-top: 10px;
    }

.hit-image {
    max-width: 80px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 10px;
    background: #f2f2f2;
}

.hit-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 6px;
}

.hit-price {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.hit-link {
    text-decoration: none;
    color: inherit;
}

</style >
<style type="text/css" >
.search-wrap {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

.hits-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 9999;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
    overflow: auto;
}


/* sørg for hits bliver en pæn liste */
.ais-Hits-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ais-Hits-item {
    padding: 0;
    border: 0;
    display: block;
    box-shadow: none;
    background: transparent;
}

.results-section-title {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .65;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.category-item {
    padding: 1px 15px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.category-link {
    text-decoration: none;
    color: inherit;
    display: block;
    font-size: 14px;
}

/* hits panel max-height */
.hits-panel {
    max-height: 575px
}

@media(min-width:992px) {
    .hits-panel {
        max-height: 800px
    }
}

/* basic InstantSearch box-sizing */
[class^=ais-] {
    box-sizing: border-box
}

/* list reset for hits */
.ais-Hits-list {
    margin: 0;
    padding: 0;
    list-style: none
}

/* buttons reset (only what SearchBox uses) */
.ais-SearchBox-submit, .ais-SearchBox-reset {
    padding: 0;
    overflow: visible;
    font: inherit;
    line-height: normal;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

    .ais-SearchBox-reset::-moz-focus-inner, .ais-SearchBox-submit::-moz-focus-inner {
        padding: 0;
        border: 0
    }

    .ais-SearchBox-reset[disabled], .ais-SearchBox-submit[disabled] {
        cursor: default
    }

/* hide browser search decorations */
.ais-SearchBox-input::-ms-clear, .ais-SearchBox-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0
}

.ais-SearchBox-input::-webkit-search-decoration,
.ais-SearchBox-input::-webkit-search-cancel-button,
.ais-SearchBox-input::-webkit-search-results-button,
.ais-SearchBox-input::-webkit-search-results-decoration {
    display: none
}

/* SearchBox layout */
.ais-SearchBox-form {
    background: #fff;
    display: flex;
    font-size: .875rem;
    height: 2.5rem;
    line-height: 1.25rem;
    position: relative;
    width: 100%
}

    .ais-SearchBox-form:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        width: 1.5rem;
        height: 1.5rem;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%235a5e9a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') center/contain no-repeat
    }

.ais-SearchBox-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #d6d6e7;
    border-radius: 3px;
    box-shadow: inset 0 1px 4px rgba(119,122,175,.3);
    caret-color: #5a5e9a;
    color: #23263b;
    flex: 1 1 0%;
    font: inherit;
    max-width: 100%;
    padding-left: 2.5rem
}

    .ais-SearchBox-input::placeholder {
        color: #5a5e9a
    }

    .ais-SearchBox-input:focus {
        border-color: #3c4fe0;
        box-shadow: 0 1px 0 rgba(35,38,59,.05);
        outline: none
    }

    .ais-SearchBox-input:disabled {
        background: linear-gradient(-180deg,#fff,#f5f5fa);
        border-color: #efeff5;
        box-shadow: none;
        cursor: not-allowed
    }

        .ais-SearchBox-input:disabled::placeholder {
            color: #b6b7d5;
            pointer-events: none
        }

/* reset icon positioning */
.ais-SearchBox-reset {
    align-items: center;
    border-radius: 50%;
    display: flex;
    fill: #484c7a;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px
}

    .ais-SearchBox-reset:focus {
        background: #b6b7d5;
        fill: #fff;
        outline: 0
    }

    .ais-SearchBox-reset[hidden] {
        display: none
    }

.ais-SearchBox-submit {
    display: none
}

/* slightly bigger text on mobile */
@media(max-width:767px) {
    .ais-SearchBox-input {
        font-size: 1rem
    }
}