.header-top .header-main-search > form,
.header-top .header-main-search > .search-input {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.header-top .header-main-search > .search-input .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 769px) {
    .header-top .header-main-search-bar,
    .header-top .header-main-search-bar:focus,
    .header-top .header-main-search-bar:active {
        border-radius: 0;
    }
}

.shoply-autocomplete {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 28px 22px;
    position: absolute;
    z-index: 1000;
    top: calc(100% + 4px);
    left: 50%;
    width: min(680px, calc(100vw - 24px));
    transform: translateX(-50%);
    max-height: min(420px, calc(100vh - 120px));
    overflow-y: auto;
    padding: 20px 28px 28px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

.shoply-autocomplete[hidden] {
    display: none;
}

.shoply-autocomplete__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    align-self: start;
    padding: 0;
    background: #fff;
    color: #222;
    text-decoration: none;
}

.shoply-autocomplete__item:hover,
.shoply-autocomplete__item.is-active {
    background: #fff;
}

.shoply-autocomplete__heading {
    grid-column: 1 / -1;
    margin: 4px 0 8px;
    color: #15232f;
    font-size: 22px;
    font-weight: 400;
    text-align: center;
}

.shoply-autocomplete__loading {
    grid-column: 1 / -1;
    padding: 18px;
    color: #777;
    text-align: center;
}

.shoply-autocomplete__image-box {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f7f7f7;
}

.shoply-autocomplete__image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.shoply-autocomplete__details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 0 0 auto;
    padding: 8px 0 0;
}

.shoply-autocomplete__title {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shoply-autocomplete__description {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: #555;
    font-size: 13px;
    line-height: 1.45;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.shoply-autocomplete__tags,
.shoply-autocomplete__variants {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.shoply-autocomplete__tags {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
}

.shoply-autocomplete__tag,
.shoply-autocomplete__variant {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    padding: 2px 5px;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shoply-autocomplete__tag {
    background: #fce8bd;
    color: #222;
    font-weight: 600;
    text-transform: uppercase;
}

.shoply-autocomplete__variant {
    border: 1px solid #d7d7d7;
    background: #fff;
    color: #666;
}

.shoply-autocomplete__variant--color {
    width: 12px;
    height: 14px;
    padding: 0;
    border-color: rgba(0, 0, 0, .18);
}

.shoply-autocomplete__price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 16px;
    white-space: nowrap;
}

.shoply-autocomplete__price del {
    color: #777;
    font-size: 13px;
}

.shoply-autocomplete__price strong {
    font-weight: 600;
}

@media (max-width: 768px) {
    .shoply-autocomplete {
        grid-template-columns: 1fr;
        gap: 18px;
        left: -12px;
        width: auto;
        right: -12px;
        transform: none;
        max-height: min(360px, calc(100vh - 90px));
        padding: 14px 16px 20px;
    }

    /* Keep the closed mobile header aligned with the other 34px icon
       targets. The desktop search rules above otherwise change the form to
       block layout, which leaves the 18px magnifier at the top. */
    .header-top .header-main-search > form,
    .header-top .header-main-search > .search-input {
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

/* Når søgningen er åben, ligger resultatlisten under samme modal som inputfeltet. */
body.shoply-search-open::before {
    background: rgba(0, 0, 0, .38);
    pointer-events: none;
}

/* On mobile .top-navigation creates a lower stacking context (z-index: 20).
   Lift it above the backdrop so the active search field and its results stay
   white instead of being dimmed together with the page. */
body.shoply-search-open .top-navigation {
    z-index: 1002;
}

/* Keep the active header search above the dimmed page while the rest of the
   header participates in the muted backdrop. */
body.shoply-search-open .header-top {
    z-index: 1002;
}

body.shoply-search-open .header-top .header-main-logo,
body.shoply-search-open .header-top .header-main-quickLinks {
    opacity: .55;
}

body.shoply-search-open .header-top .header-main-search {
    opacity: 1;
}

body.shoply-search-open .header-top .header-main-search-bar {
    border-color: #111;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

body.shoply-search-open .header-top .header-main.mobile-view {
    border-radius: 0;
    box-shadow: none;
}

/* Desktop keeps the page/header muted around the active white input and the
   white result modal. Mobile remains one continuous white search surface. */
@media (min-width: 769px) {
    body.shoply-search-open .top-navigation {
        background-color: #9e9e9e !important;
    }
}

body.shoply-search-open .shoply-autocomplete {
    position: fixed;
    /* Sit above the navigation so its top edge is visible directly below the search field. */
    z-index: 1003;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    /* The modal has a fixed viewport height, but its product rows must keep
       their natural CategoryList height instead of being compressed into
       equal 60px tracks. */
    grid-template-rows: none !important;
    grid-auto-rows: max-content;
    gap: 24px 20px;
    top: var(--shoply-search-modal-top, 64px);
    left: 50%;
    width: min(1464px, calc(100vw - 84px));
    /* The search header is offset 20px from the viewport. Keep another
       20px of the page visible below the modal. */
    height: calc(100vh - 126px);
    max-height: none;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    transform: translateX(-50%);
    border-top: 0;
    /* The result area is one rounded white modal; product cards remain square. */
    border-radius: 10px !important;
    background-clip: padding-box;
    overflow-x: hidden;
    box-shadow: none;
}

/* Reuse the same product-card structure and sizing as CategoryList. */
body.shoply-search-open .shoply-autocomplete__item {
    display: block;
    align-self: start;
    height: auto !important;
    min-height: 0;
    padding: 0;
    overflow: visible;
}

body.shoply-search-open .shoply-autocomplete .item-inner {
    height: auto !important;
    margin-bottom: 0;
}

body.shoply-search-open .shoply-autocomplete .item-inner .item-imgbox {
    height: 274px !important;
    min-height: 274px !important;
    max-height: 274px !important;
    aspect-ratio: auto;
}

body.shoply-search-open .shoply-autocomplete .item-des {
    padding: 8px 0 8px;
    margin-top: 0 !important;
}

body.shoply-search-open .shoply-autocomplete .prices {
    margin-top: 10px;
}

/* A typed search uses the same two-part structure as the category search:
   matching categories on the left and product cards on the right. */
body.shoply-search-open .shoply-autocomplete.is-search-results {
    display: block;
    padding: 24px 28px 28px;
}

body.shoply-search-open .shoply-autocomplete__search-layout {
    display: grid;
    grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

body.shoply-search-open .shoply-autocomplete__categories-column,
body.shoply-search-open .shoply-autocomplete__products {
    min-width: 0;
}

body.shoply-search-open .shoply-autocomplete__section-heading {
    margin: 0 0 14px;
    color: #15232f;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}

body.shoply-search-open .shoply-autocomplete__empty-message {
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
}

body.shoply-search-open .shoply-autocomplete__products > .shoply-autocomplete__empty-message {
    margin-top: 18px;
}

body.shoply-search-open .shoply-autocomplete__popular-heading {
    margin-top: 30px;
}

body.shoply-search-open .shoply-autocomplete__category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.shoply-search-open .shoply-autocomplete__category-link {
    display: block;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 16px;
    line-height: 1.25;
    text-decoration: none;
}

/* Author display rules otherwise override the browser's hidden attribute. */
body.shoply-search-open .shoply-autocomplete__category-link[hidden] {
    display: none !important;
}

body.shoply-search-open .shoply-autocomplete__category-link:hover,
body.shoply-search-open .shoply-autocomplete__category-link:focus {
    border-color: #222;
    color: #111;
}

body.shoply-search-open .shoply-autocomplete__categories-toggle {
    display: block;
    margin: 16px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #111;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

body.shoply-search-open .shoply-autocomplete__categories-toggle:hover,
body.shoply-search-open .shoply-autocomplete__categories-toggle:focus,
body.shoply-search-open .shoply-autocomplete__categories-toggle:focus-visible,
body.shoply-search-open .shoply-autocomplete__categories-toggle:active {
    text-decoration: none !important;
}

body.shoply-search-open .shoply-autocomplete__products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
    min-width: 0;
}

body.shoply-search-open .shoply-autocomplete__search-layout--without-categories {
    display: block;
}

body.shoply-search-open .shoply-autocomplete__search-layout--without-categories .shoply-autocomplete__products-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1300px) and (min-width: 769px) {
    body.shoply-search-open .shoply-autocomplete {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /* Mobile search has no visible page behind it; keep the complete surface white. */
    body.shoply-search-open::before {
        background: #fff;
    }

    body.shoply-search-open .shoply-autocomplete {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        /* The input and results should read as one continuous white surface
           on mobile. The measured modal position includes the old 12px gap;
           remove it here while keeping the desktop spacing unchanged. */
        top: calc(var(--shoply-search-modal-top, 64px) - 12px);
        left: 0;
        right: 0;
        width: 100vw;
        bottom: 0;
        height: auto;
        max-height: none;
        overflow-y: scroll !important;
        transform: none;
        border-radius: 0 !important;
    }

    body.shoply-search-open .shoply-autocomplete.is-search-results {
        display: block;
        padding: 18px 16px 24px;
    }

    body.shoply-search-open .shoply-autocomplete__search-layout {
        display: block;
    }

    body.shoply-search-open .shoply-autocomplete__section-heading {
        margin-bottom: 12px;
        font-size: 22px;
        text-align: left;
    }

    body.shoply-search-open .shoply-autocomplete__products {
        margin-top: 26px;
    }

    body.shoply-search-open .shoply-autocomplete__products-grid,
    body.shoply-search-open .shoply-autocomplete__search-layout--without-categories .shoply-autocomplete__products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 8px;
    }

    body.shoply-search-open .shoply-autocomplete__category-link {
        padding: 10px 12px;
        font-size: 16px;
    }

    /* The normal mobile header hides the input and only shows the magnifier.
       Once search is opened, the input must become visible so focus can
       trigger the popular-products request. */
    .header-top .header-main.mobile-view .header-main-search-bar {
        display: block;
    }

    .header-top .header-main.mobile-view .header-main-search > form,
    .header-top .header-main.mobile-view .header-main-search > .search-input {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        height: 100%;
    }

    /* Keep the close control outside the input, as a clearly visible
       separate touch target. */
    .header-top .header-main.mobile-view .header-main-search > form .header-main-search-bar {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-right: 12px;
    }

    /* Mobile browsers can re-apply the native search-field appearance when
       the field receives focus. Keep the active field square like the
       inactive field; the modal owns the responsive outer styling. */
    .header-top .header-main.mobile-view .header-main-search-bar,
    .header-top .header-main.mobile-view .header-main-search-bar:focus,
    .header-top .header-main.mobile-view .header-main-search-bar:active {
        -webkit-appearance: none;
        appearance: none;
        -webkit-border-radius: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
        outline: 0;
    }

    .header-top .header-main.mobile-view .close {
        position: static;
        display: flex;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #222;
        font-size: 32px;
        font-weight: 400;
        line-height: 1;
        opacity: 1;
        transform: none;
    }

    .header-top .header-main.mobile-view .header-main-search .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .shoply-autocomplete__heading {
        font-size: 20px;
    }
}

/* Desktop: keep the search field in its normal header position. The mobile
   search class may still be present in an older bundled script, so restore
   the regular header layout here as a defensive fallback. */
@media (min-width: 769px) {
    .header-top .header-main.mobile-view {
        position: relative;
        z-index: auto;
        top: auto;
        left: auto;
        width: 100%;
        margin: 0 auto;
        padding: 0 0 10px;
        transform: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .header-top .header-main.mobile-view .header-main-logo {
        display: block;
    }

    .header-top .header-main.mobile-view .header-main-quickLinks {
        display: flex;
    }

    .header-top .header-main.mobile-view .header-main-search {
        flex: 1 1 420px;
        width: auto;
        max-width: 560px;
        height: 42px;
        margin-right: 0;
        padding-left: 10px !important;
    }

    .header-top .header-main.mobile-view .header-main-search-bar {
        padding-right: 12px;
    }

    .header-top .header-main.mobile-view .close {
        display: none;
    }

    body.shoply-search-open .header-top .header-main-search-bar,
    body.shoply-search-open .header-top .header-main-search-bar:focus {
        border-color: #222;
        border-radius: 0;
        box-shadow: none;
        outline: 0;
    }
}