/** * Header Search. * * Only .rc-search__toggle lives inside the header — the panel is moved to * by the JS, so nothing here depends on the header layout, overflow * or stacking context. */ .rc-search { display: inline-flex; align-items: center; position: relative; } /* * Auto-injected instances land at the end of the header row. If the JS finds * the cart it re-parents the widget next to it instead, and the auto margin * has to go — otherwise it would shove the cart to the edge. */ .rc-search--injected { margin-left: auto; } /* * Once the JS lifts the button out and drops it beside the cart, the wrapper is * an empty inline-flex box still claiming free space via the auto margin above. * Collapse it rather than leaving a phantom gap in the header row. */ .rc-search--detached { display: none; } /* * The icon + cart pair, created by the JS. Being one flex item is the whole * point: the Bricks header spreads its children, so an unwrapped button drifts * into the middle of the row instead of sitting beside the cart. * Retune the spacing between them with --rc-search-cart-gap. */ .rc-search-cart-group { display: inline-flex; align-items: center; gap: var(--rc-search-cart-gap, 0.5rem); } /* The relocated button takes its colour from the cart area around it. */ .rc-search-cart-group .rc-search__toggle { color: inherit; } /* ---------------------------------------------------------- Toggle button */ .rc-search__toggle { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.5em; margin: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; border-radius: var(--radius-circle, 999px); transition: var(--transition, all 0.2s ease); } .rc-search__toggle:hover, .rc-search__toggle:focus-visible { color: var(--primary, #b8863b); background: var(--black-trans-10, rgba(0, 0, 0, 0.06)); } .rc-search__toggle svg { display: block; flex: none; } /* Label is screen-reader-only unless the element opts into showing it. */ .rc-search__toggle-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .rc-search--with-label .rc-search__toggle-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ------------------------------------------------------------ Panel shell */ /* * Surface tokens live here rather than inline so they can be retuned in one * place (or overridden from Bricks custom CSS without touching this file). * The panel is tinted and the field is white, so the input lifts off the * dropdown instead of dissolving into it. */ .rc-search__panel { --rc-search-surface: #f6f6f3; --rc-search-field: var(--white, #fff); --rc-search-row-hover: var(--white, #fff); --rc-search-hairline: rgba(0, 0, 0, 0.07); position: fixed; top: 0; left: 0; right: 0; z-index: 100000; background: var(--rc-search-surface); border-bottom: 1px solid var(--bricks-border-color, rgba(0, 0, 0, 0.1)); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.35); color: var(--dark, #1c1c1c); opacity: 0; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease; } .rc-search__panel[hidden] { display: none; } .rc-search__panel.is-open { opacity: 1; transform: translateY(0); } .rc-search__backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity 0.18s ease; } .rc-search__backdrop[hidden] { display: none; } .rc-search__backdrop.is-open { opacity: 1; } .rc-search__inner { max-width: var(--rc-search-width, 900px); margin: 0 auto; padding: 1.25rem var(--gutter, 1.5rem) 1rem; } /* -------------------------------------------------------------- Input row */ /* * Two crosses inside one box read as duplicates, so they now live in separate * boxes: 'clear' inside the field, 'close' outside it to the right. The field * border (and its focus ring) is what draws the line between them. */ .rc-search__bar { display: flex; align-items: center; gap: 0.5rem; } .rc-search__form { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border: 1px solid var(--bricks-border-color, rgba(0, 0, 0, 0.15)); border-radius: var(--radius, 8px); background: var(--rc-search-field); transition: var(--transition, all 0.2s ease); } .rc-search__form:focus-within { border-color: var(--primary, #b8863b); box-shadow: 0 0 0 3px var(--primary-trans-40, rgba(184, 134, 59, 0.25)); } .rc-search__form-icon { flex: none; opacity: 0.55; } /* * The visible box is .rc-search__form; the input inside must be completely * bare, or you get a border within a border. * * Winning that is harder than it looks. Bricks styles fields with * `input[type=...]` (0,1,1) and Automatic.css with * `input:not([type="submit"]):not([type="button"])` (0,2,1) — the latter ties * any two-class selector and wins on load order, since both sheets load after * this one. Hence the extra specificity *and* !important on the four * properties that actually draw the second box. * * Note the ancestor is .rc-search__panel, not .rc-search: the JS re-parents the * panel to , so the widget root is no longer above it in the tree. */ .rc-search__panel .rc-search__form input.rc-search__input, .rc-search__panel .rc-search__form input.rc-search__input:focus, .rc-search__panel .rc-search__form input.rc-search__input:focus-visible, .rc-search__panel .rc-search__form input.rc-search__input:hover { border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; background: none !important; } .rc-search__panel .rc-search__form input.rc-search__input { flex: 1 1 auto; width: auto; min-width: 0; height: auto; min-height: 0; margin: 0; padding: 0.6rem 0; color: inherit; font-family: var(--text-font-family, inherit); font-size: 1.0625rem; line-height: 1.4; -webkit-appearance: none; appearance: none; } /* Kill the native WebKit clear affordance — we ship our own button. */ .rc-search__panel .rc-search__input::-webkit-search-cancel-button, .rc-search__panel .rc-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .rc-search__clear, .rc-search__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--radius-circle, 999px); background: none; color: inherit; cursor: pointer; opacity: 0.6; transition: var(--transition, all 0.2s ease); } /* Slightly smaller: it's a minor action on the text, not on the panel. */ .rc-search__clear svg { width: 16px; height: 16px; } /* Dismisses the whole panel, so it gets more presence than the clear button. */ .rc-search__close { width: 2.5rem; height: 2.5rem; opacity: 0.75; } .rc-search__clear:hover, .rc-search__close:hover, .rc-search__clear:focus-visible, .rc-search__close:focus-visible { opacity: 1; background: var(--black-trans-10, rgba(0, 0, 0, 0.06)); } .rc-search__clear[hidden] { display: none; } /* ---------------------------------------------------------------- Results */ .rc-search__results { max-height: min(60vh, 30rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .rc-search__results:not(:empty) { margin-top: 0.75rem; } .rc-search__group-title { margin: 0.5rem 0 0.25rem; font-family: var(--heading-font-family, inherit); font-size: var(--text-m); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; } .rc-search__list { list-style: none; margin: 0 0 0.5rem; padding: 0; } /* Hairline between Products and Pages, but never a leading one. */ .rc-search__group-title + .rc-search__list { margin-bottom: 0.75rem; } .rc-search__list + .rc-search__group-title { padding-top: 0.75rem; border-top: 1px solid var(--rc-search-hairline); } .rc-search__item { margin: 0; } .rc-search__link { display: flex; align-items: center; gap: 0.85rem; padding: 0.5rem; border-radius: var(--radius, 8px); color: inherit; text-decoration: none; transition: background-color 0.15s ease; } /* * On a tinted surface the row highlight has to go *lighter*, not darker — * the hovered row should read as lifting toward the viewer. */ .rc-search__link:hover, .rc-search__link:focus-visible, .rc-search__item.is-active .rc-search__link { background: var(--rc-search-row-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); color: inherit; } .rc-search__thumb { flex: none; width: 3rem; height: 3rem; object-fit: cover; border-radius: var(--radius, 6px); background: var(--white, #fff); box-shadow: 0 0 0 1px var(--rc-search-hairline); } .rc-search__text { min-width: 0; } .rc-search__title { display: block; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } .rc-search__title mark { padding: 0; background: none; color: var(--primary, #b8863b); font-weight: 700; } .rc-search__meta { display: -webkit-box; margin-top: 0.15rem; font-size: calc(var(--text-s) * 1.1); line-height: 1.35; opacity: 0.65; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rc-search__all { display: block; margin-top: 0.25rem; padding: 0.75rem 0.5rem; border-top: 1px solid var(--bricks-border-color, rgba(0, 0, 0, 0.1)); color: var(--primary, #b8863b); font-weight: 600; text-decoration: none; border-radius: var(--radius, 8px); } .rc-search__all:hover, .rc-search__all.is-active { background: var(--primary-ultra-light, rgba(184, 134, 59, 0.08)); } .rc-search__status { margin: 0.5rem 0 0; font-size: var(--text-xs, 0.8125rem); opacity: 0.65; } .rc-search__status:empty { display: none; } .rc-search__panel.is-busy .rc-search__form-icon { animation: rc-search-pulse 1s ease-in-out infinite; } @keyframes rc-search-pulse { 50% { opacity: 0.15; } } /* ---------------------------------------------------------- Small screens */ @media (max-width: 767px) { .rc-search__panel { bottom: 0; display: flex; flex-direction: column; } .rc-search__inner { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; padding-bottom: 1.5rem; } .rc-search__results { flex: 1 1 auto; max-height: none; } .rc-search__backdrop { display: none !important; } } @media (prefers-reduced-motion: reduce) { .rc-search__panel, .rc-search__backdrop, .rc-search__link, .rc-search__toggle { transition: none; } .rc-search__panel.is-busy .rc-search__form-icon { animation: none; } }