/* * FiboSearch layer — the plugin's search bar, drawn as the theme's SearchField. * * Conditional: inc/assets.php only enqueues this sheet when the plugin is there * to be corrected, and it is never added to the editor canvas — the block editor * renders the theme's own field, never the shortcode. * * ── Two trees, one control ─────────────────────────────────────────────────── * * The theme's SearchField is a pill that *is* the form, with a borderless caret * inside it (components.css, `.dl-search`). FiboSearch's markup is the other way * round: the wrapper and the form are layout only, and the pill has to be the * `` itself, with the magnifier and the «Søk» button positioned over it. * So `.dl-search` is deliberately *not* on the plugin's wrapper — it would draw a * second border, a second background and a second shadow around the first. Only * `.dl-header__search` is, for the flex/order/max-width the header bar needs, * and its inline-end padding is taken back here because the button now lives * inside the field rather than beside it. * * ── Specificity ────────────────────────────────────────────────────────────── * * Every rule that overrides the plugin repeats the plugin's own selector shape — * `.dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input` is (0,3,1), * and a single class would lose to it. The `.dl-search--fibo` scope is what keeps * all of it off any second instance the shop places in a widget or a page. * * The suggestions dropdown is the one exception: the plugin appends it to * `` and positions it inline from JavaScript, so it cannot be scoped to * the header and nothing here may set its `position`, `top`, `left`, `width`, * `display` or `z-index` — those are the script's, and fighting them detaches * the panel from the field. * * Rules are the component layer's: tokens only, no media queries. Everything * that changes with the viewport is a custom property resolved in section 1 of * base.css. * * Contents * 1. The bar * 2. The magnifier and the «Søk» button * 3. The suggestions dropdown */ /* ══ 1. The bar ══════════════════════════════════════════════════════════════ */ .dl-search--fibo.dgwt-wcas-search-wrapp { min-width: 0; /* the plugin's 230px floor overflows the 320px header */ margin-inline: 0; /* the plugin centres the wrapper; on the bar it is a flex item */ max-width: var(--dl-header-search-max); padding-inline-end: 0; /* the button is inside the field, not beside it */ line-height: normal; color: inherit; } .dl-search--fibo .dgwt-wcas-search-form, .dl-search--fibo .dgwt-wcas-sf-wrapp { position: relative; margin: 0; } .dl-search--fibo .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { height: 44px; /* no token — the handoff's hit-target floor, as .dl-search */ padding-block: 0; padding-inline: 44px var(--dl-fibo-input-pad-end); /* the magnifier, then the button */ border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-card); box-shadow: var(--shadow-1); font: var(--type-body); color: var(--text-heading); transition: var(--transition-control); } /* The plugin squares the top corners while the dropdown is open. The panel is a detached card in this theme, so the pill stays a pill. */ .dgwt-wcas-open .dl-search--fibo .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input { border-radius: var(--radius-pill); } .dl-search--fibo .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus { outline: 0; border-color: var(--border-brand); background: var(--surface-card); box-shadow: var(--focus-ring); } .dl-search--fibo .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { font-style: normal; /* the plugin italicises it */ font-weight: inherit; color: var(--text-faint); opacity: 1; } /* ══ 2. The magnifier and the «Søk» button ═══════════════════════════════════ */ /* * The plugin only renders its own magnifier when the submit button is *off*, and * the design draws both. So the glyph is a mask on the wrapper's `::before` — * the same data-URI the theme's icons come from (assets/css/icons.css). The * plugin uses `::before` for a clearfix; overriding it whole is safe because * `::after` is the half that does the clearing. */ .dl-search--fibo .dgwt-wcas-sf-wrapp::before { content: ""; position: absolute; inset-inline-start: var(--space-5); top: 50%; z-index: 1; display: block; width: 18px; /* no token — the icon size .dl-search__icon renders at */ height: 18px; transform: translateY(-50%); background-color: var(--text-faint); -webkit-mask-image: var(--ds-icon-search); mask-image: var(--ds-icon-search); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; pointer-events: none; } /* The same button as .dl-search__submit, inset 4px inside the 44px pill. Hidden on `mobile`, where the field is the whole control and Enter still submits. */ .dl-search--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { position: absolute; inset-block: 4px auto; /* no token — the inset that leaves 36px of button */ inset-inline: auto 4px; display: var(--dl-header-search-submit); align-items: center; justify-content: center; width: auto; min-width: 0; height: 36px; /* no token — 44 minus the 4px inset on both sides */ min-height: 0; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill); background: var(--brand-strong); font: var(--weight-medium) var(--text-sm)/1 var(--font-body); color: var(--text-inverse); text-transform: none; text-shadow: none; transition: var(--transition-control); } .dgwt-wcas-open .dl-search--fibo .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit { border-radius: var(--radius-pill); } .dl-search--fibo .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:hover, .dl-search--fibo .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:focus, .dl-search--fibo .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit:active { opacity: 1; /* the plugin fades it to 0.7 */ background: var(--brand-strong-hover); } /* The speech-bubble tail the plugin points at the field. */ .dl-search--fibo .dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit::before { display: none; } /* ══ 3. The suggestions dropdown ═════════════════════════════════════════════ * * Unscoped, and it has to be: the panel is a child of , not of the header. * Geometry stays the script's — see the header of this file. */ .dgwt-wcas-suggestions-wrapp { 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); } .dgwt-wcas-suggestion { padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--border-subtle); font: var(--type-small); line-height: var(--leading-snug); color: var(--text-body); } .dgwt-wcas-suggestion:last-child { border-bottom: 0; } .dgwt-wcas-suggestion-selected, .dgwt-wcas-suggestion:hover { background: var(--surface-sunken); } .dgwt-wcas-st { color: var(--text-heading); } /* The plugin marks the matched substring with . */ .dgwt-wcas-suggestion strong { font-weight: var(--weight-medium); color: var(--text-brand); } .dgwt-wcas-st-breadcrumbs { font: var(--type-caption); color: var(--text-muted); } .dgwt-wcas-sp { font: var(--type-body-strong); color: var(--text-price); white-space: nowrap; } /* The thumbnail cell is a fixed square, whatever comes back from the network. * The plugin sizes the image itself (`max-height: 90%`, `width: auto`), so a * portrait shot, a 404 and a product photo each gave the row a different * height — with a broken image the alt text wrapped and pushed the row past * 200px. Size the cell, not the image, and clip whatever the browser draws in * place of a picture it could not load. */ .dgwt-wcas-suggestion-product .dgwt-wcas-si { /* no token — a square the size of the two-line row it sits in */ flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; font-size: 0; line-height: 0; } .dgwt-wcas-suggestion-product .dgwt-wcas-si img { box-sizing: border-box; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 2px; border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); object-fit: contain; } .dgwt-wcas-suggestion.dgwt-wcas-suggestion-more, .dgwt-wcas-suggestion-more .dgwt-wcas-st-more { justify-content: center; font: var(--type-body-strong); color: var(--text-brand); } .dgwt-wcas-suggestion-nores { font: var(--type-body); color: var(--text-muted); } .dgwt-wcas-suggestion-headline { font: var(--type-eyebrow); color: var(--text-faint); text-transform: uppercase; }