/* * SearchSuggest layer — the header field's own dropdown. * * Conditional, the way fibosearch.css is: inc/search-suggest.php only enqueues * this sheet when the `delsenter-search` plugin is there to fill the panel, and * it is never added to the editor canvas, which renders a field no script * enhances. * * ── Where the geometry comes from ──────────────────────────────────────────── * * The panel is a child of the form, not of . That is the one substantive * difference from the sheet this replaces: FiboSearch appended its dropdown to * the document and positioned it from JavaScript on every scroll and resize, so * nothing in the theme was allowed to touch its `position`, `top`, `left` or * `width`. Here the form is the containing block and the panel is simply * `left: 0; right: 0` inside it — it cannot drift away from the field, and the * header's own `--dl-header-search-max` sizes both. * * `.dl-search` is the pill and it clips nothing, so the panel is free to hang * below it. The pill's `overflow` is deliberately left alone: a rounded * `overflow: hidden` on the form would cut the panel's corners off. * * ── Rows ───────────────────────────────────────────────────────────────────── * * Three shapes, one grid each rather than one shared grid: the category row is * two cells, the product row is three, and the «Vis alle treff» row is one that * centres. Trying to draw all three with one template is how the thumbnail cell * ends up reserving 44px of empty space on a category row. * * The media cell is a fixed square, and the image is sized to the cell rather * than the cell to the image — a portrait shot, a 404 and a product photo each * gave FiboSearch's row a different height, and a broken image wrapped its alt * text past 200px. Same fix, same reason. * * Rules are the component layer's: tokens only, no media queries. * * Contents * 1. The panel * 2. Headlines and messages * 3. Rows */ /* ══ 1. The panel ════════════════════════════════════════════════════════════ */ .dl-search--suggest { position: relative; } .dl-suggest { position: absolute; /* * No token — the theme has no z-index scale yet. The number is read inside * the header's own stacking context (`.dl-header` is sticky at 20), so the * only thing it has to beat is the mega-panel's 40, which is the other * absolutely positioned child of the same header. The bottom bar's 50 is in * the root context and paints over the whole header whatever is written * here; the panel is capped at 60vh from the top of the bar and does not * reach it. */ z-index: 60; top: calc(100% + var(--space-2)); right: 0; left: 0; max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2) 0; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-3); font: var(--type-body); color: var(--text-body); } /* ══ 2. Headlines and messages ══════════════════════════════════════════════ */ .dl-suggest__headline { padding: var(--space-3) var(--space-5) var(--space-2); font: var(--type-eyebrow); color: var(--text-faint); text-transform: uppercase; } .dl-suggest__headline:first-child { padding-top: var(--space-2); } .dl-suggest__message { padding: var(--space-5); font: var(--type-body); color: var(--text-muted); text-align: center; } .dl-suggest__hint { display: block; margin-top: var(--space-2); font: var(--type-small); } /* ══ 3. Rows ════════════════════════════════════════════════════════════════ */ .dl-suggest__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); color: var(--text-body); text-decoration: none; cursor: pointer; } /* * The keyboard's active row and the pointer's hover are the same treatment on * purpose: there is one cursor in this list, and which device moved it is not * something the customer should have to tell apart. */ .dl-suggest__row.is-active, .dl-suggest__row:hover { background: var(--surface-sunken); } .dl-suggest__row:focus-visible { outline: none; background: var(--surface-sunken); } /* ── Category ── */ .dl-suggest__row--cat { font: var(--type-body-strong); color: var(--text-heading); } .dl-suggest__cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-suggest__cat-count { flex: 0 0 auto; font: var(--type-caption); color: var(--text-muted); } /* ── Vehicle ── */ /* * The same treatment as a category row: both are the broad answer above the * products, and the headline above them is what says which kind it is. */ .dl-suggest__row--vehicle { font: var(--type-body-strong); color: var(--text-heading); } .dl-suggest__vehicle-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-suggest__vehicle-count { flex: 0 0 auto; font: var(--type-caption); color: var(--text-muted); } /* ── Product ── */ .dl-suggest__media { /* no token — a square the size of the two-line row it sits in */ flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); font-size: 0; line-height: 0; } .dl-suggest__media img { box-sizing: border-box; width: 100%; height: 100%; max-width: none; padding: 2px; /* no token — keeps the shot off the hairline */ object-fit: contain; } .dl-suggest__body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; /* no token — two lines of one label */ } /* * Two lines, then an ellipsis. Product titles here run to «Sideskjørt V.1 Audi * S4 / A4 / A4 S-Line B8 / B8 FL», and a row that grows to hold one of those * pushes the rest of the suggestions off the screen on a phone. */ .dl-suggest__title { display: -webkit-box; overflow: hidden; font: var(--type-small); line-height: var(--leading-snug); color: var(--text-heading); -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .dl-suggest__sku { overflow: hidden; font: var(--type-caption); color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; } .dl-suggest__meta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 2px; /* no token — matches the body's two lines */ text-align: right; } .dl-suggest__price { font: var(--type-body-strong); color: var(--text-price); white-space: nowrap; } .dl-suggest__stock { font: var(--type-caption); color: var(--text-muted); white-space: nowrap; } /* ── Vis alle treff ── */ .dl-suggest__row--more, .dl-suggest__row--chat { justify-content: center; margin-top: var(--space-2); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-subtle); font: var(--type-body-strong); color: var(--text-brand); }