/*
 * Webko Swift Search — the modal, in this shop's language.
 *
 * The plugin ships the modal as sixteen custom properties scoped to #webko-swift-search-modal
 * and a hard reset, so none of the theme's own CSS can bleed into it. That means the whole
 * of this file is a palette: it hands the modal this shop's colours and shapes and touches
 * as little else as it can. Nothing here is copied from the plugin, so an update to it
 * cannot silently undo this, and nothing here is a colour literal, so it follows the shop.
 *
 * Why that matters more here than on most sites: an entity with custom theming gets its own
 * :root printed into wp_head (see get_custom_entity_theme() in functions.php), and a custom
 * shop domain gets get_custom_shop_theme()'s. Both write the same variable names. Because
 * every value below is a var() reference rather than a copy, the colour resolves where it
 * is used and each company's modal comes out in their own palette with nothing further to
 * do — including the ones added after this file was written.
 */

#webko-swift-search-modal {
    /* — Surfaces — */
    --wss-bg: #fff;
    --wss-results-bg: #fafafa;
    --wss-border: #e3e3e3;
    --wss-hairline: rgba(34, 34, 34, 0.08);
    --wss-backdrop: rgba(34, 34, 34, 0.5);

    /* Deeper and softer than the plugin's default: the card is meant to sit clearly above
       the page rather than on it, which is most of what makes a modal feel current. */
    --wss-shadow: 0 24px 64px rgba(34, 34, 34, 0.22), 0 2px 8px rgba(34, 34, 34, 0.08);
    --wss-shadow-sm: 0 1px 2px rgba(34, 34, 34, 0.04);

    --wss-radius: 16px;
    --wss-radius-sm: 10px;
    --wss-pad: 22px;

    /*
     * The shop's own colour, for the three places that carry emphasis rather than text:
     * the keyboard's row, the focused field, a category chip under the cursor.
     *
     * Emphasis only, never text. A brand colour is chosen to be recognised, not to be read,
     * and this one is a pale yellow by default — every entity picks their own and some of
     * them will pick another pale one. Used as a bar, a border and a wash it reads at any
     * lightness; used as type on white it would fail for half of them.
     */
    --wss-accent: var(--primary-color);
    --wss-border-focus: var(--primary-color);
    /* 6 and not 10: these rows are tall, and a wash reads by area rather than by alpha.
       At 10 a saturated brand colour turned the row under the cursor into a solid panel. */
    --wss-hover: color-mix(in srgb, var(--primary-color) 6%, transparent);
    --wss-mark: color-mix(in srgb, var(--primary-color) 20%, transparent);

    --wss-price: var(--price-color);
}

/* — The card — */

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

#webko-swift-search-modal .wss-modal__label {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* — The field —
 *
 * Taller than the plugin's default and fully rounded. It is the one thing in the modal the
 * shopper is meant to act on, and at 45px in a 16px card it read as a form row rather than
 * as the point of the page.
 */
#webko-swift-search-modal .wss-modal__search {
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
}

/*
 * A ring rather than a thicker border.
 *
 * At 2px a saturated brand colour draws a hard hoop around the field that is the loudest
 * thing in the modal — louder than the results it is there to produce. One px of the brand
 * colour plus a soft halo of the same hue reads as focus without shouting, and the halo
 * gives the indicator enough area to stay visible when the brand colour is a pale one.
 */
#webko-swift-search-modal .wss-modal__search:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 15%, transparent);
}

#webko-swift-search-modal .wss-modal__input {
    font-size: 16px; /* never smaller: iOS zooms the page on focus below 16px */
}

/*
 * — The result sheet —
 *
 * Detached from the field instead of hanging off its bottom edge.
 *
 * Butted against it there was nowhere for the eye to rest between what was typed and what
 * came back, and the plugin's own 4px of top padding sat in that seam: invisible until the
 * first row was hovered, at which point it read as a stray white line between the field and
 * the row. Space that is there on purpose does not have that failure mode.
 *
 * Aligned to the field rather than to the card's edges, because a sheet that floats has to
 * float under something — reaching wider than the field it belongs to made it look like a
 * second, larger card slipping out from behind the first.
 */
#webko-swift-search-modal .wss-modal__results {
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 0;
    border-top: 0;
    border-radius: var(--wss-radius);
    max-height: calc(100dvh - 280px);
}

/* — Rows — */

#webko-swift-search-modal .wss-result {
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 16px;
}

#webko-swift-search-modal .wss-result__image {
    border-radius: var(--wss-radius-sm);
    overflow: hidden;
    background: var(--wss-results-bg);
}

#webko-swift-search-modal .wss-result__title {
    font-weight: 500; /* Poppins at 600 is heavy enough to shout a list of ten */
    letter-spacing: -0.005em;
}

#webko-swift-search-modal .wss-result__sku {
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/*
 * One line of categories, not three.
 *
 * This catalogue puts a product on every shelf that could describe it — "Bottoms ·
 * Football · My products · shorts · Shorts · Sports & Clothing · Sports activity" is one
 * real row — and wrapped in full it is taller than the product name and repeats itself.
 * It is orientation, not content: the first two or three say where the product sits and
 * the rest is noise, so the line is cut where it stops helping.
 */
#webko-swift-search-modal .wss-result__cats {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#webko-swift-search-modal .wss-result__meta {
    flex-wrap: nowrap;
    align-items: baseline;
}

#webko-swift-search-modal .wss-result__price {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.01em;
}

/* No width cap and no colour: the column is wide enough for "Excluding VAT and shipping"
   on one line, and the suffix inherits the row's text so the amount is the only thing on
   the row wearing the shop's accent. Capping it at 15ch is what broke it over two ragged
   right-aligned lines. */
#webko-swift-search-modal .wss-result__price small {
    font-size: 10.5px;
}

/* An attribute badge borrows the shop's own quiet grey rather than the plugin's blue-grey. */
#webko-swift-search-modal .wss-result__attr {
    background: color-mix(in srgb, var(--secondary-color) 7%, transparent);
    color: var(--secondary-color);
    border-radius: 999px;
}

/* — Category chips — */

#webko-swift-search-modal .wss-category {
    border-color: var(--wss-hairline);
    font-weight: 500;
}

/*
 * — "See all N results" —
 *
 * Filled with the secondary colour and not the primary, deliberately.
 *
 * The theme's own .btn-primary-color puts white type on --primary-color, which on the
 * default yellow is barely legible; the shop lives with it because it has always looked
 * that way, and reproducing it in a surface built today would be copying a bug. The
 * secondary pair is contrast-safe by construction instead: an entity that sets its own
 * secondary colour also picks black or white to sit on it (the secondary_contrast_color
 * field), so this reads at any palette anyone can configure.
 */
/* Flush to the sheet's bottom edge now that the panel has no padding of its own: the
   sheet's rounded corners clip it, so the bar finishes the panel instead of floating in it. */
#webko-swift-search-modal .wss-modal__all {
    margin: 0;
    padding: 16px var(--wss-pad);
    background: var(--secondary-color);
    color: var(--secondary-contrast-color);
    font-weight: 500;
    border-top: 0;
}

#webko-swift-search-modal .wss-modal__all:hover,
#webko-swift-search-modal .wss-modal__all:focus-visible {
    background: color-mix(in srgb, var(--secondary-color) 88%, #fff);
    text-decoration: none;
}

/* — Empty and correction copy — */

#webko-swift-search-modal .wss-modal__empty {
    padding-top: 34px;
    padding-bottom: 34px;
}

/*
 * — The highlight —
 *
 * The plugin fills a mark and puts a 2px halo around it, which on a saturated brand colour
 * makes a solid block: a list where six rows match the same two words became a page of
 * blocks with product names between them. Dropping the halo for a soft underline keeps the
 * match findable and lets the word stay a word. Colour is not doing the work on its own —
 * the weight carries it too, which is also what makes it survive a pale brand palette.
 */
#webko-swift-search-modal .wss-result__title mark,
#webko-swift-search-modal .wss-result__excerpt mark {
    background: transparent;
    box-shadow: inset 0 -0.42em 0 var(--wss-mark);
    font-weight: 600;
    border-radius: 0;
    padding: 0 1px;
}

/* The excerpt is supporting text and was competing with the product name. */
#webko-swift-search-modal .wss-result__excerpt {
    font-size: 12.5px;
    opacity: 0.62;
}

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

/*
 * — Out of stock —
 *
 * A quiet badge in the shop's own neutral, at the end of the meta line where the eye
 * already is. It reads as a fact about the product rather than as a warning, which is what
 * it is: the product is still worth showing, the shopper just cannot have it today.
 */
#webko-swift-search-modal .wss-result__stock {
    background: color-mix(in srgb, var(--secondary-color) 9%, transparent);
    color: var(--secondary-color);
    font-weight: 500;
    opacity: 0.8;
}