/* ═══════════════════════════════════════
   Preset: kpa
   The kpa theme's tokens (assets/css/colors.css in the theme) mapped onto the plugin's.
   Every var() carries the theme's own value as fallback, so a kpa site that has renamed
   a colour still gets the house look rather than none.
   ═══════════════════════════════════════ */

/* — The search field in the header — */
.wss-field {
    --wss-field-bg: var(--grey-color, #F4F6F7);
    --wss-field-color: var(--black-color, #282B30);
    --wss-field-muted: var(--text-color, #626263);
    --wss-field-focus: var(--blue-button, var(--blue-color, #006AFF));
    --wss-field-radius: 4px;
    --wss-field-height: 46px;
}

button.wss-field--bar {
    padding: 0 12px 0 15px;
    gap: 12px;
}

.wss-field__icon {
    width: 22px;
    height: 22px;
}

/* ═══════════════════════════════════════
   The modal
   One sheet, the field as its headline: no title above it (the dialog is labelled for
   screen readers already), the close button inside the field's row where the thumb and
   the eye already are, and the results as soft rows rather than a ruled table.
   ═══════════════════════════════════════ */
#webko-swift-search-modal {
    --wss-text: var(--black-color, #282B30);
    --wss-muted: var(--text-color, #626263);
    /* Two accents, because a kpa shop's "blue" is not always dark: efarvehandel's is neon
       yellow. --wss-accent is for text, rings and the caret, so it takes the theme's button
       colour, which always carries white text and is therefore always dark enough to read
       on white. --wss-accent-wash is the brand colour itself, only ever as a tint. */
    --wss-accent: var(--blue-button, var(--blue-color, #006AFF));
    --wss-accent-wash: color-mix(in srgb, var(--blue-color, #006AFF) 26%, transparent);
    --wss-bg: var(--white-color, #FFFFFF);
    --wss-results-bg: var(--grey-color, #F4F6F7);
    --wss-border: var(--border-color, #E2E2E2);
    --wss-border-focus: var(--wss-accent);
    --wss-hover: var(--grey-color, #F4F6F7);
    --wss-selected: var(--light-blue, #F2F7FF);
    --wss-hairline: var(--border-color, #E2E2E2);
    --wss-backdrop: rgba(40, 43, 48, 0.42);
    --wss-radius: 12px;
    --wss-radius-sm: 8px;
    --wss-pad: 12px;
    --wss-field-h: 58px;
    /* Out as fast as in, and decelerating both ways: an exit that starts slow reads as lag. */
    --wss-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --wss-ease-in: cubic-bezier(0.23, 1, 0.32, 1);
    /* The sheet's distance from the top, and the same again kept free below it. */
    --wss-top: min(10vh, 96px);
    padding-top: var(--wss-top);
    color: var(--wss-text);
}

#webko-swift-search-modal .wss-modal__backdrop {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

#webko-swift-search-modal .wss-modal__container {
    max-width: 720px;
    padding: 6px var(--wss-pad) 6px;
    gap: 0;
    border-radius: var(--wss-radius);
    /* A hairline for the edge, a long soft drop for the lift. */
    box-shadow:
        0 0 0 1px rgba(40, 43, 48, 0.06),
        0 2px 6px rgba(40, 43, 48, 0.06),
        0 24px 56px -12px rgba(40, 43, 48, 0.34);
}

/* — Header: the title is for screen readers, the close button moves into the field row — */
#webko-swift-search-modal .wss-modal__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

#webko-swift-search-modal .wss-modal__header {
    position: absolute;
    z-index: 2;
    top: calc(6px + (var(--wss-field-h) - 32px) / 2);
    right: calc(var(--wss-pad) + 4px);
}

#webko-swift-search-modal .wss-modal__close {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--grey-button, #F4F6F7);
    color: var(--wss-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    opacity: 1;
    transition: background-color 0.15s ease, transform 0.12s var(--wss-ease-out);
}

#webko-swift-search-modal .wss-modal__close:active {
    transform: scale(0.96);
}

#webko-swift-search-modal .wss-modal__close:focus-visible {
    outline: 2px solid var(--wss-accent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    #webko-swift-search-modal .wss-modal__close:hover {
        opacity: 1;
        background: var(--border-color, #E2E2E2);
    }
}

/* — The field: big, flush with the sheet; the caret is the focus — */
#webko-swift-search-modal .wss-modal__search {
    height: var(--wss-field-h);
    padding: 0 76px 0 8px;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#webko-swift-search-modal .wss-modal__icon {
    display: block;
    width: 22px;
    height: 22px;
    opacity: 1;
    color: var(--wss-text);
}

#webko-swift-search-modal .wss-modal__input {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    caret-color: var(--wss-accent);
}

/* The theme sets its placeholders in italics; this one is the field's headline. */
#webko-swift-search-modal .wss-modal__input::placeholder {
    color: var(--wss-muted);
    font-style: normal;
    font-weight: 400;
    opacity: 0.85;
}

/* The close button holds the field's right edge; the arrow hint would sit under it. */
#webko-swift-search-modal .wss-modal__arrow {
    display: none;
}

#webko-swift-search-modal .wss-modal__clear {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    opacity: 1;
    color: var(--wss-muted);
    transition: background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    #webko-swift-search-modal .wss-modal__clear:hover {
        opacity: 1;
        background: var(--grey-color, #F4F6F7);
    }
}

/* — Suggestions and categories, between the field and the results — */
#webko-swift-search-modal .wss-modal__suggestions {
    padding: 2px 8px 6px;
}

#webko-swift-search-modal .wss-suggestion {
    color: var(--wss-accent);
    opacity: 1;
}

#webko-swift-search-modal .wss-modal__categories {
    gap: 6px;
    padding: 2px 8px 12px;
}

#webko-swift-search-modal .wss-categories__heading {
    margin-right: 4px;
    color: var(--wss-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 1;
}

#webko-swift-search-modal .wss-category {
    padding: 6px 11px;
    border: 0;
    border-radius: 999px;
    background: var(--grey-color, #F4F6F7);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#webko-swift-search-modal .wss-category__count {
    color: var(--wss-muted);
    opacity: 1;
}

#webko-swift-search-modal .wss-category:focus-visible {
    outline: 2px solid var(--wss-accent);
    outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
    #webko-swift-search-modal .wss-category:hover {
        background: var(--light-blue, #F2F7FF);
        color: var(--wss-accent);
    }

    #webko-swift-search-modal .wss-category:hover .wss-category__count {
        color: inherit;
    }
}

/* — Results —
   In the sheet's own flow rather than hung below it: one surface, one radius, one shadow.
   Hung below, the card's rounded bottom corners showed as notches above the list, and the
   list had no shadow of its own. The negative margins reach the card's edges and bottom. */
#webko-swift-search-modal .wss-modal__results {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 0 calc(-1 * var(--wss-pad)) -6px;
    padding: 8px;
    border-top: 1px solid var(--wss-hairline);
    border-radius: 0 0 var(--wss-radius) var(--wss-radius);
    scroll-padding: 8px 0 76px;
    /* As much air below the sheet as above it. Grown to 20px from the bottom, a full open
       box read as a sheet sitting low on the screen, though its top had not moved; what does
       not fit scrolls inside it. */
    max-height: calc(100dvh - var(--wss-results-top, 250px) - var(--wss-top, 96px));
}

#webko-swift-search-modal .wss-result {
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--wss-radius-sm);
    transition: background-color 0.12s ease;
}

#webko-swift-search-modal .wss-result + .wss-result {
    border-top: 0;
    margin-top: 2px;
}

#webko-swift-search-modal .wss-result:hover,
#webko-swift-search-modal .wss-result:focus {
    background: transparent;
}

@media (hover: hover) and (pointer: fine) {
    #webko-swift-search-modal .wss-result:hover {
        background: var(--wss-hover);
    }
}

/* The keyboard's row: the theme's light blue, so it reads as "chosen", not as "hovered". */
#webko-swift-search-modal .wss-result[aria-selected="true"] {
    background: var(--wss-selected);
    box-shadow: none;
}

/* Product shots on white, whole and uncropped, as the theme's own product cards show them. */
#webko-swift-search-modal .wss-result__image {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background: var(--white-color, #FFFFFF);
    box-shadow: inset 0 0 0 1px var(--border-color, #E2E2E2);
}

#webko-swift-search-modal .wss-result__image img {
    object-fit: contain;
    padding: 4px;
}

#webko-swift-search-modal .wss-result__body {
    gap: 3px;
}

#webko-swift-search-modal .wss-result__title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--wss-text);
}

/* Muted by colour, not by opacity: the theme's grey text, at full legibility. Contextual
   alternates off, or Inter draws a SKU's "->" as an arrow. */
#webko-swift-search-modal .wss-result__meta,
#webko-swift-search-modal .wss-result__excerpt,
#webko-swift-search-modal .wss-modal__correction,
#webko-swift-search-modal .wss-modal__empty {
    color: var(--wss-muted);
    opacity: 1;
}

#webko-swift-search-modal .wss-result__meta {
    flex-wrap: nowrap;
    font-size: 12px;
    font-feature-settings: "calt" 0;
    font-variant-numeric: tabular-nums;
}

/* One line of shelves: a product filed under six categories should not read as a paragraph.
   The SKU keeps its full width; the categories give way. */
/* The SKU keeps its own width up to 60% of the line; the categories give way first. */
#webko-swift-search-modal .wss-result__sku {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#webko-swift-search-modal .wss-result__cats {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#webko-swift-search-modal .wss-result__sku {
    color: var(--wss-text);
    font-weight: 500;
}

#webko-swift-search-modal .wss-result__excerpt {
    font-size: 13px;
}

/* The matched letters in the accent, over a highlighter stroke of the brand colour: blue on
   light blue on one shop, ink on yellow on another, readable on every one of them. */
#webko-swift-search-modal .wss-result__title mark {
    background: linear-gradient(to top, var(--wss-accent-wash) 0 42%, transparent 42%);
    box-shadow: none;
    color: var(--wss-accent);
}

#webko-swift-search-modal .wss-result__excerpt mark {
    background: none;
    box-shadow: none;
    color: var(--wss-text);
    font-weight: 600;
}

#webko-swift-search-modal .wss-result__attr {
    background: var(--grey-color, #F4F6F7);
    color: var(--wss-text);
}

#webko-swift-search-modal .wss-result__price {
    align-self: center;
    padding-top: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wss-text);
}

#webko-swift-search-modal .wss-result__price del,
#webko-swift-search-modal .wss-result__price small {
    color: var(--wss-muted);
    font-weight: 400;
    opacity: 1;
}

/* — "See all": the theme's primary button, held at the bottom of the list while it
     scrolls, with the rows fading out under it rather than being cut off. — */
#webko-swift-search-modal .wss-modal__all {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 10px 4px 4px;
    padding: 13px 20px;
    border-top: 0;
    border-radius: var(--wss-radius-sm);
    background: var(--blue-button, #006AFF);
    box-shadow: 0 0 0 8px var(--wss-bg);
    color: var(--white-color, #FFFFFF);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.12s var(--wss-ease-out);
}

#webko-swift-search-modal .wss-modal__all::before {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    bottom: calc(100% + 8px);
    height: 28px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--wss-bg) 0%, transparent), var(--wss-bg));
    pointer-events: none;
}

/* Darker on hover rather than the theme's hover colour: on some kpa shops that is a light
   brand colour, and the white label would vanish into it. */
#webko-swift-search-modal .wss-modal__all:hover,
#webko-swift-search-modal .wss-modal__all:focus-visible {
    background: color-mix(in srgb, var(--blue-button, #006AFF) 86%, #000);
    text-decoration: none;
}

#webko-swift-search-modal .wss-modal__all:active {
    transform: scale(0.99);
}

#webko-swift-search-modal .wss-modal__all:focus-visible {
    outline: 2px solid var(--wss-accent);
    outline-offset: 3px;
}

#webko-swift-search-modal .wss-modal__empty {
    padding: 36px 20px;
    font-size: 14px;
}

#webko-swift-search-modal .wss-modal__correction {
    padding: 0 8px 8px;
    font-size: 13px;
}

/* — The open box, in the theme's surfaces: grey chips that turn blue under the pointer,
     and the theme's own yellow SPAR badge on the sale tiles. — */
#webko-swift-search-modal .wss-home {
    --wss-chip-bg: var(--grey-color, #F4F6F7);
    --wss-chip-bg-hover: var(--light-blue, #F2F7FF);
    --wss-sale-bg: var(--sales-color, #FCCF0C);
    --wss-sale-color: var(--black-color, #282B30);
    --wss-home-pad: 12px;
    gap: 14px;
    padding-top: 12px;
    padding-bottom: 6px;
}

/*
 * Compact enough that the whole open box - three recently viewed, the popular searches and
 * the sale - fits a laptop's sheet without scrolling. Recently viewed is a reminder, not a
 * result list: small picture, the name on one line, its SKU and price.
 */
#webko-swift-search-modal .wss-home__head {
    margin-bottom: 6px;
}

#webko-swift-search-modal .wss-home__list .wss-result {
    align-items: center;
    gap: 12px;
    padding: 7px 12px;
}

#webko-swift-search-modal .wss-home__list .wss-result + .wss-result {
    margin-top: 0;
}

#webko-swift-search-modal .wss-home__list .wss-result__image {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
}

#webko-swift-search-modal .wss-home__list .wss-result__body {
    gap: 1px;
}

#webko-swift-search-modal .wss-home__list .wss-result__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

/* Price at the right on every screen: with the name on one line there is room for it, and
   the phone layout's price-under-the-name would make each reminder twice as tall. */
#webko-swift-search-modal .wss-home__list .wss-result {
    flex-wrap: nowrap;
}

#webko-swift-search-modal .wss-home__list .wss-result__price {
    flex-basis: auto;
    padding-left: 0;
    text-align: right;
    font-size: 14px;
}

#webko-swift-search-modal .wss-home__list .wss-result__price del {
    display: block;
    margin-left: 0;
}

#webko-swift-search-modal .wss-home__list .wss-result__attrs,
#webko-swift-search-modal .wss-home__list .wss-result__excerpt {
    display: none;
}

/* Sale pictures a little wider than tall: the products are mostly wider than tall anyway. */
#webko-swift-search-modal .wss-home .wss-tile__image {
    aspect-ratio: 4 / 3;
}

#webko-swift-search-modal .wss-home .wss-result.wss-tile {
    gap: 5px;
}

/* A short laptop screen (720px or so): flatter sale pictures and a little less air, so the
   whole box still fits without scrolling. */
@media (min-width: 601px) and (max-height: 780px) {
    #webko-swift-search-modal .wss-home {
        gap: 10px;
        padding-top: 10px;
    }

    #webko-swift-search-modal .wss-home .wss-tile__image {
        aspect-ratio: 16 / 10;
    }

    #webko-swift-search-modal .wss-home__list .wss-result {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

#webko-swift-search-modal .wss-home__heading {
    color: var(--wss-muted);
    opacity: 1;
}

#webko-swift-search-modal .wss-home__action {
    color: var(--wss-muted);
    opacity: 1;
}

#webko-swift-search-modal .wss-chip__q svg,
#webko-swift-search-modal .wss-link svg {
    color: var(--wss-muted);
    opacity: 1;
}

#webko-swift-search-modal .wss-tile__badge {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

#webko-swift-search-modal .wss-tile__title {
    color: var(--wss-text);
}

#webko-swift-search-modal .wss-tile__price del {
    color: var(--wss-muted);
    opacity: 1;
}

#webko-swift-search-modal .wss-link {
    box-shadow: none;
    background: var(--grey-color, #F4F6F7);
    font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
    #webko-swift-search-modal .wss-chip:hover,
    #webko-swift-search-modal .wss-link:hover {
        color: var(--wss-accent);
    }

    #webko-swift-search-modal .wss-chip:hover svg,
    #webko-swift-search-modal .wss-link:hover svg {
        color: inherit;
    }

    #webko-swift-search-modal .wss-link:hover {
        box-shadow: none;
        background: var(--light-blue, #F2F7FF);
    }

    #webko-swift-search-modal .wss-result.wss-tile:hover {
        background: var(--wss-hover);
    }
}

/* — Phones: the sheet from the top edge, the field still the headline — */
@media (max-width: 600px) {
    #webko-swift-search-modal {
        --wss-pad: 8px;
        --wss-field-h: 54px;
        padding: 8px 8px 0;
    }

    #webko-swift-search-modal .wss-modal__search {
        padding-right: 70px;
    }

    #webko-swift-search-modal .wss-modal__input {
        font-size: 17px;
    }

    /* A phone keeps the sheet to the bottom edge: the keyboard has the lower half already. */
    #webko-swift-search-modal .wss-modal__results {
        padding: 6px;
        max-height: calc(100dvh - var(--wss-results-top, 200px) - 8px);
    }

    #webko-swift-search-modal .wss-result {
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 12px;
        row-gap: 4px;
        padding: 10px;
    }

    #webko-swift-search-modal .wss-result__image {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
    }

    #webko-swift-search-modal .wss-result__body {
        flex: 1 1 0;
    }

    /* Under the text on a phone, lined up with it: the title gets the full width, and the
       price still reads as part of the product above it. */
    #webko-swift-search-modal .wss-result__price {
        flex-basis: 100%;
        padding-left: 60px;
        text-align: left;
        font-size: 14px;
    }

    #webko-swift-search-modal .wss-result__price del,
    #webko-swift-search-modal .wss-result__price small {
        display: inline;
        margin-left: 6px;
    }
}