.psm-search-widget {
    position: relative;
    max-width: 480px;
}
.psm-search-form {
    display: flex;
    align-items: stretch;
}
.psm-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    font-size: 14px;
}
.psm-search-submit {
    flex: 0 0 auto;
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 0 3px 3px 0;
    background: #f5f5f5;
    cursor: pointer;
    padding: 0 14px;
}

.psm-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.psm-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: #fff;
    font-size: 15px;
    /* The bar is often a direct child of a Bootstrap .row, which injects gutter
       padding (e.g. 12px) onto its columns. That inset makes the colored caps
       float inside the pill ("double background"); force it off so caps reach
       the edges. */
    padding: 0 !important;
}
.psm-bar .psm-bar-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0 12px;
    font-size: 15px;
    color: #1f2937;
    background: transparent;
}
.psm-bar .psm-bar-input::placeholder { color: #9aa1ac; }

/* Left magnifier = submit; right icon = voice. Shared icon-button look. */
.psm-bar .psm-bar-lead-btn,
.psm-bar .psm-bar-voice {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #5c6470;
    padding: 0 16px;
}
.psm-bar .psm-bar-lead-btn:hover,
.psm-bar .psm-bar-voice:hover { color: #1f2937; }
.psm-bar .psm-bar-voice { color: #3a4150; }

/* Thin vertical divider before the voice button (image bars 1 & 2). */
.psm-bar .psm-bar-divider {
    flex: 0 0 auto;
    align-self: center;
    width: 1px;
    height: 24px;
    background: #e4e7ec;
}
.psm-bar input:focus { outline: 0; }

/* Transient voice status / error message under the bar. */
.psm-bar .psm-voice-toast {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1060;
    max-width: 320px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #1f2a44;
    color: #fff;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(17,24,39,.18);
}
.psm-bar .psm-voice-toast.is-error { background: #b3261e; }

/* Listening pulse on the mic/sparkle while dictating. */
.psm-bar .psm-bar-voice.is-listening { color: #e23744; }
.psm-bar .psm-bar-voice.is-listening svg { animation: psm-pulse 1s ease-in-out infinite; transform-origin: center; }
@keyframes psm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: .6; }
}

/* ---- Style 1 — Normal corners ---- */
.psm-bar--1 {
    height: 52px;
    border: 1px solid #e4e7ec;
    border-radius: 10px;
}
.psm-bar--1:focus-within { border-color: #c3c8d0; box-shadow: 0 0 0 3px rgba(29,29,27,.06); }

/* ---- Style 2 — Rounder corners ---- */
.psm-bar--2 {
    height: 54px;
    border: 1px solid #eef0f3;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(17,24,39,.08);
}
.psm-bar--2:focus-within { border-color: #e2e6ec; box-shadow: 0 10px 28px rgba(17,24,39,.12); }
.psm-bar--2 .psm-bar-lead-btn { padding-left: 22px; }
.psm-bar--2 .psm-bar-voice { padding-right: 22px; }

/* ---- Style 3 — Custom design (lavender cap + dark navy voice cap) ---- */
.psm-bar--3 {
    height: 56px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(17,24,39,.10);
}
/* Lavender lead cap: diagonal RIGHT edge (clip-path). Bar overflow rounds the
   outer-left corner to the pill. */
.psm-bar--3 .psm-bar-lead-btn {
    background: #e8ecf6;
    color: #1f2a44;
    padding: 0 30px 0 24px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.psm-bar--3 .psm-bar-lead-btn:hover { background: #dfe4f1; color: #1f2a44; }
.psm-bar--3 .psm-bar-input { padding: 0 14px; }
.psm-bar--3 .psm-bar-input::placeholder { color: #6b7280; }
.psm-bar--3 .psm-bar-divider { display: none; }
/* Dark navy voice cap: diagonal LEFT edge, parallel to the lavender one, so the
   white middle reads as a slanted band. Bar overflow rounds the outer-right. */
.psm-bar--3 .psm-bar-voice {
    background: #1f2a44;
    color: #fff;
    padding: 0 28px 0 30px;
    clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%);
}
.psm-bar--3 .psm-bar-voice:hover { background: #18213a; color: #fff; }
.psm-bar--3 .psm-bar-voice.is-listening { color: #fff; }

@media (max-width: 575px) {
    .psm-bar { font-size: 14px; }
    .psm-bar .psm-bar-lead-btn,
    .psm-bar .psm-bar-voice { padding: 0 12px; }
    .psm-bar--3 .psm-bar-lead-btn { padding: 0 16px; }
    .psm-bar--3 .psm-bar-voice { padding: 0 18px; }
}

.psm-dd {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    margin-top: 10px;
    min-width: 300px;
    max-width: 460px;
    max-height: 76vh;
    overflow-y: auto;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .14);
    border-radius: 8px;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.35;
}
.psm-dd[data-position="left"] { left: auto; right: 0; }

.psm-dd-empty {
    padding: 18px 16px;
    color: #6b7280;
    text-align: center;
}
.psm-dd-section { padding: 4px 0 6px; }
.psm-dd-section + .psm-dd-section { border-top: 1px solid #f1f3f5; }
.psm-dd-heading {
    padding: 8px 16px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9aa1ac;
    font-weight: 700;
}

/* Product rows */
.psm-dd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    color: inherit;
    text-decoration: none;
}
.psm-dd-row:hover,
.psm-dd-item:hover,
.psm-dd-item.is-active {
    background: #f5f7fa;
    color: #111;
}
.psm-dd-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eef0f3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.psm-dd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.psm-dd-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.psm-dd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psm-dd-feats {
    font-size: 12px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.psm-dd-price { flex: 0 0 auto; font-weight: 700; color: #2b8a3e; font-size: 13px; white-space: nowrap; }

/* Simple text items (autocomplete list, finder facets) */
.psm-dd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 16px;
    color: inherit;
    text-decoration: none;
}
.psm-dd-item .psm-dd-name { flex: 1 1 auto; }

/* Facet chips (categories / brands / suppliers in autocomplete + modern) */
.psm-dd-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 8px; }
.psm-dd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #f8fafc;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
}
.psm-dd-chip:hover { background: #eef2f7; border-color: #d6dde6; color: #111; }
.psm-dd-count {
    font-size: 11px;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
}

/* "See all results" footer */
.psm-dd-more {
    display: block;
    text-align: center;
    padding: 11px 16px;
    margin-top: 4px;
    border-top: 1px solid #eef0f3;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}
.psm-dd-more:hover { background: #f5f7fa; }

/* Add-to-cart button (sibling of the card link — never nested in an <a>) */
.psm-dd-rowwrap { display: flex; align-items: center; }
.psm-dd-rowwrap .psm-dd-row,
.psm-dd-rowwrap .psm-dd-item { flex: 1 1 auto; min-width: 0; }
.psm-dd-cart {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 12px;
    padding: 6px 10px;
    border: 1px solid #d6dde6;
    border-radius: 6px;
    background: #fff;
    color: #2563eb;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.psm-dd-cart:hover { background: #2563eb; border-color: #2563eb; color: #fff; }
.psm-dd-cart--icon { padding: 6px; }
.psm-dd-cart-icon { display: block; }

/* ===== Modern theme ===== */
.psm-dd-modern { max-width: 480px; }

/* ===== Finder theme (grid + facet sidebar) ===== */
.psm-dd-finder { max-width: 520px; padding: 12px 0; }
.psm-finder-main { display: flex; align-items: flex-start; gap: 18px; padding: 0 16px; }
.psm-finder-products { flex: 1 1 auto; min-width: 0; }
.psm-finder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding-bottom: 6px;
}
.psm-finder-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .12s ease, border-color .12s ease;
}
.psm-finder-card:hover { border-color: #d6dde6; box-shadow: 0 4px 14px rgba(17, 24, 39, .08); }
.psm-finder-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    margin-bottom: 8px;
}
.psm-finder-thumb img { max-width: 100%; max-height: 96px; object-fit: contain; }
.psm-finder-card .psm-dd-name { white-space: normal; font-size: 13px; font-weight: 500; }
.psm-finder-card .psm-dd-feats { white-space: normal; margin-top: 2px; }
.psm-finder-card .psm-dd-price { margin-top: 4px; }
.psm-finder-cardwrap { display: flex; flex-direction: column; }
.psm-finder-cardwrap .psm-finder-card { flex: 1 1 auto; }
.psm-finder-cardwrap .psm-dd-cart { margin: 8px 0 0; justify-content: center; }
.psm-finder-filters { flex: 0 0 200px; max-width: 200px; }
.psm-finder-topic { margin-bottom: 14px; }
.psm-finder-topic .psm-dd-heading { padding: 0 0 6px; }
.psm-finder-topic .psm-dd-item { padding: 5px 0; border-bottom: 1px solid #f4f6f8; }
.psm-finder-topic .psm-dd-item:hover { background: transparent; color: #2563eb; }
.psm-dd-finder .psm-dd-more { margin: 8px 16px 0; }

/* ===== "Full" position — sized to the theme container by front.js ===== */
.psm-dd.psm-dd-full { position: absolute; max-width: none; border-radius: 0 0 8px 8px; }
.psm-dd.psm-dd-full.psm-dd-finder .psm-finder-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ===== "Centered half width" position — ~50% of the container, centred under
 * the search box, positioned by front.js. Keeps all corners rounded since it
 * floats with generous side margins (unlike the edge-to-edge full variant). ===== */
.psm-dd.psm-dd-half { position: absolute; max-width: none; }
.psm-dd.psm-dd-half.psm-dd-finder .psm-finder-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ===== Suggestions (shown on focus) — Material search icon ===== */
.psm-dd-suggestions .psm-dd-item::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="%23888888"%3E%3Cpath d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/%3E%3C/svg%3E');
    opacity: .85;
}
.psm-dd-suggestions .psm-dd-item { justify-content: flex-start; }

/* ===== Search results left-column facet sidebar ===== */
.psm-facets { font-size: 14px; }
.psm-facets-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
.psm-facets-group { margin-bottom: 18px; }
.psm-facets-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    font-weight: 700;
    margin: 0 0 8px;
}
.psm-facets-list { list-style: none; margin: 0; padding: 0; }
.psm-facets-list li { margin: 0; }
.psm-facets-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    color: #374151;
    text-decoration: none;
    border-bottom: 1px solid #f4f6f8;
}
.psm-facets-list a:hover { color: #005cab; }
.psm-facets-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psm-facets-count {
    flex: 0 0 auto;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 1px 8px;
}

/* ===== Mobile search overlay ===== */
.psm-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(255, 255, 255, .98);
    display: none;
    flex-direction: column;
    padding: 16px;
}
.psm-search-overlay.is-open { display: flex; }
.psm-search-overlay .psm-dd { position: static; box-shadow: none; border: 0; max-width: none; }
.psm-search-overlay-close {
    align-self: flex-end;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 767px) {
    .psm-finder-main { flex-direction: column; }
    .psm-finder-filters { flex-basis: auto; max-width: none; border-top: 1px solid #eef0f3; padding-top: 10px; width: 100%; }
}