/* -----------------------------------------------------------------------------
 * Product search type-ahead (pd-quick-search)
 *
 * Uses the theme custom properties: --c1 --c2 --bg1 --bg2 --bg3 --tc
 * --border_c --radius --radius_sm --gap_min --box_shadow --input_box_shadow
 * --bezier --body_font --caption --small
 * -------------------------------------------------------------------------- */

/* Own visually-hidden helper.
   The theme's .srOnly uses visibility:hidden, which drops the node out of the
   accessibility tree entirely — the label and the aria-live status would then
   be invisible to screen readers too. This is the standard clip-based variant,
   which keeps the node readable. */
.pd-quick-search__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Root: positioning context for the absolutely positioned listbox. */
.pd-quick-search {
    position: relative;
    width: 100%;
    max-width: 100%;
    font-family: var(--body_font, inherit);
}

/* The icon is overlaid on the input, header-search style, so the form is just a
   positioning context. */
.pd-quick-search__form {
    position: relative;
    display: block;
}

/* -----------------------------------------------------------------------------
 * Input
 * Defensive reset: this theme's style.css carries a sitewide input[type="search"] rule with an asymmetric
 * border + radius, font-size 1.2rem, padding 9px 12px, color #000 and a hidden
 * webkit search-cancel button. Everything visual is reset here, scoped to the
 * component so nothing else on the site is affected.
 * -------------------------------------------------------------------------- */
.pd-quick-search .pd-quick-search__input {
    border: 0;
    border-radius: var(--radius, 10px);
    box-shadow: var(--input_box_shadow, inset 0 0 0 1px currentColor);
    background-color: var(--bg1, #fff);
    color: var(--tc, #070707);
    width: 100%;
    min-width: 0; /* grid children default to min-content; without this the
                     input refuses to shrink on narrow screens */
    font: inherit;
    font-size: 1rem;
    padding: 12px 48px 12px 16px; /* right padding clears the overlaid icon */
}

/* The sitewide rule sets `outline: none !important`, which an author-origin
   rule cannot beat — so the focus ring is drawn with box-shadow instead. The
   first declaration is the fallback for browsers without color-mix(). */
.pd-quick-search .pd-quick-search__input:focus-visible {
    box-shadow: var(--input_box_shadow, inset 0 0 0 1px currentColor), 0 0 0 3px rgba(13, 51, 29, 0.25);
    box-shadow: var(--input_box_shadow, inset 0 0 0 1px currentColor), 0 0 0 3px color-mix(in srgb, var(--c1, #0d331d) 25%, transparent);
}

/* -----------------------------------------------------------------------------
 * Icon button, sitting inside the input on the right. Not a submit: it focuses
 * the input, and once focused opens the first result (see quick-search.js).
 * -------------------------------------------------------------------------- */
.pd-quick-search .pd-quick-search__icon {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c1, #0d331d);
    font-size: 1.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .15s var(--bezier, cubic-bezier(0.25, 0.8, 0.35, 0.9));
}

.pd-quick-search .pd-quick-search__icon:hover {
    background-color: var(--bg2, #f4f7f5);
}

.pd-quick-search .pd-quick-search__icon:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(13, 51, 29, 0.25);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c1, #0d331d) 25%, transparent);
}

/* -----------------------------------------------------------------------------
 * Listbox
 * IMPORTANT: only the :not([hidden]) selector may set `display`. An
 * author-origin `display` on the bare class would outrank the UA sheet's
 * [hidden] { display: none } and the dropdown would never hide.
 * -------------------------------------------------------------------------- */
.pd-quick-search__list:not([hidden]) {
    display: block;
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    overscroll-behavior: contain; /* don't scroll-chain to the page */
    background-color: var(--bg1, #fff);
    border-radius: var(--radius, 10px);
    box-shadow: var(--box_shadow, 0 10px 25px rgba(0, 0, 0, 0.1));
    text-align: left;
}

/* Theme list styles add margins/bullets; strip them.
   Unused rows carry [hidden]; the UA default hides them, nothing to add. */
.pd-quick-search__list li {
    margin: 0;
    padding: 0;
}

/* -----------------------------------------------------------------------------
 * Options
 * -------------------------------------------------------------------------- */
.pd-quick-search__list a {
    display: block;
    padding: 10px 12px;
    color: var(--tc, #070707);
    text-decoration: none;
    border-radius: var(--radius_sm, 5px);
    transition: background-color .15s var(--bezier, cubic-bezier(0.25, 0.8, 0.35, 0.9));
    cursor: pointer;
}

.pd-quick-search__list a:hover,
.pd-quick-search__list a.is-active {
    background-color: var(--bg2, #f4f7f5);
}

/* The keyboard-active option gets an extra outline so it stays distinguishable
   when the pointer happens to hover a different row. */
.pd-quick-search__list a.is-active {
    box-shadow: inset 0 0 0 1px var(--c1, #0d331d);
}

/* Match highlight: emphasis by weight/colour only, no highlighter background. */
.pd-quick-search__list mark {
    background: none;
    color: var(--c1, #0d331d);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .pd-quick-search .pd-quick-search__icon,
    .pd-quick-search__list a {
        transition: none;
    }
}