/* === Kleurplaten zoekbalk === */ /* block i.p.v. inline-block: anders krijgt de resultaten-grid geen betrouwbare breedte mee (shrink-to-fit + CSS grid auto-fill botsen) en valt alles onder elkaar. */ /* margin auto: een block-element negeert text-align:center van de ouder (Enfold's "centreren"-optie zet meestal text-align, geen margin) — zonder dit blijft de balk altijd links hangen ook al staat de tekst-uitlijning op centreren. */ .lpb-zoek-widget { display: block; font-family: inherit; position: relative; max-width: 640px; margin-left: auto; margin-right: auto; } /* ── Zoekbalk — direct typklaar, geen aparte openknop ─────────────────── */ .lpb-zoek-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 54px; background: #fff; border: 1px solid #ddd; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: border-color .18s ease, box-shadow .18s ease; } .lpb-zoek-bar:focus-within { border-color: #2997ab; box-shadow: 0 4px 16px rgba(41,151,171,.15); } .lpb-zoek-bar-icon { width: 19px; height: 19px; color: #999; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .lpb-zoek-input { flex: 1; min-width: 0; height: 100%; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; font-size: 1rem; line-height: normal; font-family: inherit; color: #222 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; -webkit-appearance: none; appearance: none; } .lpb-zoek-input::placeholder { color: #999; } .lpb-zoek-input::-webkit-search-cancel-button, .lpb-zoek-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } .lpb-zoek-cat-select { flex-shrink: 0; max-width: 150px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #e2e2e2; background: #f7f7f7; font-size: .82rem; color: #555; cursor: pointer; } /* ── Resultaten-dropdown — direct onder de balk, geen overlay ─────────── Zit los aan geplakt (zie JS) zodat advertenties met een eigen stacking-context er nooit overheen kunnen vallen. Positie (top/left/width) wordt door JS gezet; hier alleen het uiterlijk. */ .lpb-zoek-dropdown { z-index: 2147483647; background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.18); max-height: 70vh; overflow-y: auto; padding: 10px; } .lpb-zoek-dropdown[hidden] { display: none !important; } .lpb-zoek-dd-label { padding: 4px 6px 10px; font-size: .7rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: .06em; } .lpb-zoek-dd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; } .lpb-zoek-result-item { display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; border-radius: 8px; transition: background .12s ease; } .lpb-zoek-result-item:hover, .lpb-zoek-result-item.is-active { background: rgba(41,151,171,.09); } .lpb-zoek-result-thumb { width: 100%; height: 90px; object-fit: contain; border-radius: 6px; background: #f5f5f5; pointer-events: none; } .lpb-zoek-status { grid-column: 1 / -1; text-align: center; color: #999; font-size: .88rem; padding: 16px 6px; } .lpb-zoek-all-link { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 8px; padding: 12px; font-size: .85rem; font-family: inherit; color: #2997ab; background: none; border: none; border-top: 1px solid #f0f0f0; cursor: pointer; transition: background .15s ease; } .lpb-zoek-all-link:hover { background: rgba(41,151,171,.08); } /* ── Inline resultatengrid onder de balk (na "Alle X resultaten") ─────── */ .lpb-zoek-inline:not(:empty) { margin-top: 1.4em; } .lpb-zoek-inline-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 1em; } .lpb-zoek-inline-header h3 { margin: 0; font-size: 1.15rem; } .lpb-zoek-inline-header span { font-size: .82rem; color: #999; } .lpb-zoek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .9em; } .lpb-zoek-thumb { display: block; text-decoration: none; color: inherit; background: #f7f7f7; border-radius: .6em; padding: .6em; transition: transform .15s ease, box-shadow .15s ease; } .lpb-zoek-thumb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .lpb-zoek-thumb img { width: 100%; height: 130px; object-fit: contain; display: block; } .lpb-zoek-spinner, .lpb-zoek-empty { text-align: center; color: #999; padding: 2em 0; } @media (max-width: 480px) { .lpb-zoek-cat-select { display: none; } }