@askdialog/dialog-react 2.4.0 → 2.6.0

package/README.md

@@ -38,7 +38,7 @@ import '@askdialog/dialog-react/style.css';
 
 const client = new Dialog({
   apiKey: 'your-api-key',
-  locale: 'en',
+  locale: 'en', currency: 'EUR',
   callbacks: {
     addToCart: () => Promise.resolve(),
     getProduct: () => Promise.resolve({
@@ -105,7 +105,7 @@ Standalone input component for asking questions.
 
 ### Storefront search
 
-React binding of the SDK search controller (`createSearchController`): debounce, cancellation, stale-response protection, pagination and search attribution analytics all come from the SDK — these components only render and route.
+`useDialogSearch` binds the SDK controller to component state. The controller manages requests and analytics; components handle rendering and navigation.
 
 ```tsx
 import { Dialog } from '@askdialog/dialog-sdk';
@@ -116,15 +116,15 @@ import {
 } from '@askdialog/dialog-react';
 import '@askdialog/dialog-react/style.css';
 
-const client = new Dialog({ apiKey: 'your-api-key', locale: 'en' });
+const client = new Dialog({ apiKey: 'your-api-key', locale: 'en-US', currency: 'USD' });
 
 function SearchPage() {
-  const { controller, state } = useDialogSearch({ client });
+  const { controller, state, theme } = useDialogSearch({ client, language: 'en', currency: client.currency });
 
   return (
     <>
       <DialogSearchBar controller={controller} placeholder="Search products..." />
-      <DialogSearchResults controller={controller} state={state} />
+      <DialogSearchResults controller={controller} state={state} theme={theme} />
     </>
   );
 }
@@ -136,13 +136,28 @@ Creates one search controller per hook instance and disposes it on unmount.
 
 **Options:**
 - `client` (Dialog) - Dialog SDK client instance (required)
+- `language` (string, required) - Lowercase ISO 639-1 language code, e.g. `fr`
+- `currency` (string, required) - ISO 4217 currency, e.g. `EUR`
 - `surface` (SearchSurface, optional) - Where results are displayed, for analytics (default: `'search_page'`)
 - `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
 - `debounceMs` (number, optional) - Keystroke debounce (default: 250)
 - `hitsPerPage` (number, optional) - Results per page (default: 12)
-- `locale` (string, optional) - Storefront locale naming the searched index (`products_fr`); defaults to the client's
+- `sections` (SearchSection[], optional) - Extra indices searched alongside the products; `collections` fills the collections column of `DialogSearchResults`. Only request an index the catalog exposes: a missing one fails the whole search.
 
-**Returns:** `{ controller, state }` — pass both to the components below. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
+Search language and currency are explicit and independent of `client.locale`, which can be a regional locale such as `fr-FR`.
+
+**Returns:** `{ controller, state, theme }` — pass them to the components below; `theme` is the client's theme, for `DialogSearchResults`. `state.status` is `idle` / `loading` / `success` / `empty` / `error`.
+
+With the collections column, for a catalog that exposes a collections index:
+
+```tsx
+const { controller, state, theme } = useDialogSearch({
+  client,
+  language: 'en',
+  currency: client.currency,
+  sections: [{ index: 'collections', hitsPerPage: 5 }],
+});
+```
 
 #### DialogSearchBar
 
@@ -156,12 +171,15 @@ Search input: typing runs a debounced search, submitting (Enter) searches immedi
 
 #### DialogSearchResults
 
-Floating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, anchored under the spot where the component is rendered (place it right after the bar), so no ancestor stacking context or `overflow: hidden` can hide it. Renders the controller states; successful searches render a scrollable list of `DialogSearchProductCard` rows plus the pagination controls. Each card links to the product page and records search attribution (viewport impressions, select on click and middle-click) automatically. Clicking outside the panel (and outside the bar) closes it; typing again or re-focusing the bar reopens it with the results kept.
+Floating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, centered on the bar (up to 1440px wide, filling the viewport) and anchored under the spot where the component is rendered (place it right after the bar), so no ancestor stacking context or `overflow: hidden` can hide it. It shows the same layout as the Shopify search overlay: a collections column on the left when `sections` requests them, the products on the right as a list or a 3-column grid, the query match emphasized in every title, and either a "See all results" button or the pagination controls. Below 768px the panel stacks, collections in a horizontal rail above the products. Colors, radii and font follow the SDK theme (dark palette when `backgroundColor` is dark, straight or rounded corners from `ctaBorderType`). Each card links to the product page and records search attribution (viewport impressions, select on click and middle-click) automatically. Clicking outside the panel (and outside the bar) closes it; typing again or re-focusing the bar reopens it with the results kept.
 
 **Props:**
 - `controller` (SearchController) - From `useDialogSearch` (required)
 - `state` (SearchControllerState) - From `useDialogSearch` (required)
-- `locale` (string, optional) - BCP 47 locale used to format the card prices via `Intl.NumberFormat` (browser default when omitted)
+- `locale` (string, optional) - BCP 47 locale for prices, counts and labels (English labels and browser number format when omitted)
+- `theme` (Theme, optional) - The client's theme, as returned by `useDialogSearch`; styles the panel (palette, radii, font)
+- `layout` (`'list' | 'grid'`, optional) - Products layout (default: `'list'`)
+- `seeAllHref` ((query) => string, optional) - Link of the "See all results" footer button; omitted, the panel paginates instead
 
 #### DialogSearchPagination
 
@@ -170,6 +188,7 @@ Previous/next controls with a page indicator; hidden while there is a single pag
 **Props:**
 - `controller` (SearchController) - From `useDialogSearch` (required)
 - `state` (SearchControllerState) - From `useDialogSearch` (required)
+- `locale` (string, optional) - Locale of the button labels
 
 ## Theming
 

package/dist/components/DialogSearch/DialogSearchCollections.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { SearchHit } from '@askdialog/dialog-sdk';
+import { SearchMessages } from './searchMessages';
+interface DialogSearchCollectionsProps {
+    collections: SearchHit[];
+    query: string;
+    messages: SearchMessages;
+}
+export declare const DialogSearchCollections: FC<DialogSearchCollectionsProps>;
+export {};

package/dist/components/DialogSearch/DialogSearchPagination.d.ts

@@ -3,6 +3,8 @@ import { SearchController, SearchControllerState } from '@askdialog/dialog-sdk';
 interface DialogSearchPaginationProps {
     controller: SearchController;
     state: SearchControllerState;
+    locale?: string;
 }
+export declare const hasPagination: (state: SearchControllerState) => boolean;
 export declare const DialogSearchPagination: FC<DialogSearchPaginationProps>;
 export {};

package/dist/components/DialogSearch/DialogSearchProductCard.d.ts

@@ -5,6 +5,8 @@ interface DialogSearchProductCardProps {
     hit: SearchHit;
     index: number;
     locale?: string;
+    /** Committed query, emphasized inside the title. */
+    query?: string;
 }
 export declare const DialogSearchProductCard: FC<DialogSearchProductCardProps>;
 export {};

package/dist/components/DialogSearch/DialogSearchProducts.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { SearchController, SearchResult } from '@askdialog/dialog-sdk';
+import { SearchMessages } from './searchMessages';
+interface DialogSearchProductsProps {
+    controller: SearchController;
+    response: SearchResult;
+    locale: string | undefined;
+    messages: SearchMessages;
+}
+export declare const DialogSearchProducts: FC<DialogSearchProductsProps>;
+export {};

package/dist/components/DialogSearch/DialogSearchResults.d.ts

@@ -1,9 +1,16 @@
 import { FC } from 'react';
-import { SearchController, SearchControllerState } from '@askdialog/dialog-sdk';
+import { SearchController, SearchControllerState, Theme } from '@askdialog/dialog-sdk';
+export type SearchProductsLayout = "list" | "grid";
 interface DialogSearchResultsProps {
     controller: SearchController;
     state: SearchControllerState;
+    /** BCP 47 locale for prices, counts and labels. */
     locale?: string;
+    /** Usually `client.theme`, as returned by `useDialogSearch`. */
+    theme?: Theme;
+    layout?: SearchProductsLayout;
+    /** Link of the "See all results" footer; omitted, the panel paginates instead. */
+    seeAllHref?: (query: string) => string;
 }
 export declare const DialogSearchResults: FC<DialogSearchResultsProps>;
 export {};

package/dist/components/DialogSearch/HighlightedTitle.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface HighlightedTitleProps {
+    title: string;
+    query: string;
+}
+export declare const HighlightedTitle: FC<HighlightedTitleProps>;
+export {};

package/dist/components/DialogSearch/cssColor.d.ts

@@ -0,0 +1,3 @@
+export type Rgb = [number, number, number];
+export declare const parseCssColor: (color: string) => Rgb | undefined;
+export declare const relativeLuminance: (color: string) => number | undefined;

package/dist/components/DialogSearch/panelPlacement.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import { AnchorRect } from './useAnchorRect';
+export declare const isAnchorOnScreen: (rect: AnchorRect, viewportHeight: number) => boolean;
+/** Centered on the bar, clamped to the viewport; flips above when short of room below. */
+export declare const panelStyle: (rect: AnchorRect, viewportWidth: number, viewportHeight: number) => CSSProperties;

package/dist/components/DialogSearch/searchCollections.d.ts

@@ -0,0 +1,6 @@
+import { SearchHit } from '@askdialog/dialog-sdk';
+/** Collections without a link cannot navigate on selection and are not rendered. */
+export declare const navigableCollections: (collections: SearchHit[] | undefined) => {
+    collection: SearchHit;
+    href: string;
+}[];

package/dist/components/DialogSearch/searchDisplay.d.ts

@@ -1,3 +1,6 @@
-import { SearchPriceRange } from '@askdialog/dialog-sdk';
+import { SearchHit, SearchPriceRange } from '@askdialog/dialog-sdk';
+/** The lowest price only, as on the Shopify storefront search. */
 export declare const formatSearchPrice: (priceRange: SearchPriceRange | undefined, locale?: string) => string;
-export declare const safeProductHref: (url: string) => string | undefined;
+export declare const safeHref: (url: string) => string | undefined;
+export declare const hitHref: (hit: SearchHit) => string | undefined;
+export declare const hitTitle: (hit: SearchHit) => string;

package/dist/components/DialogSearch/searchMessages.d.ts

@@ -0,0 +1,14 @@
+export interface SearchMessages {
+    searching: (query: string) => string;
+    noResults: string;
+    retry: string;
+    collectionsLabel: string;
+    productsLabel: string;
+    collectionsCount: (count: number) => string;
+    resultsCount: (count: number) => string;
+    seeAllLabel: (count: number) => string;
+    previous: string;
+    next: string;
+    pageOf: (page: number, pages: number) => string;
+}
+export declare const getSearchMessages: (locale: string | undefined) => SearchMessages;

package/dist/components/DialogSearch/searchTheme.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@askdialog/dialog-sdk';
+export type SearchPanelVariables = Record<`--dso-${string}`, string>;
+export declare const resolveSearchPanelVariables: (theme: Theme | undefined) => SearchPanelVariables;

package/dist/components/DialogSearch/titleHighlight.d.ts

@@ -0,0 +1,6 @@
+export interface TitleParts {
+    before: string;
+    match: string;
+    after: string;
+}
+export declare const splitTitleMatch: (title: string, query: string) => TitleParts;

package/dist/components/DialogSearch/useAnchorRect.d.ts

@@ -5,8 +5,13 @@ export interface AnchorRect {
     left: number;
     width: number;
 }
+interface Viewport {
+    width: number;
+    height: number;
+}
 export declare const useAnchorRect: (active: boolean) => {
     anchorRef: RefObject<HTMLDivElement | null>;
     rect: AnchorRect | undefined;
-    viewportHeight: number;
+    viewport: Viewport;
 };
+export {};

package/dist/components/DialogSearch/useDialogSearch.d.ts

@@ -1,18 +1,27 @@
-import { Dialog, SearchController, SearchControllerState, SearchHit, SearchSurface } from '@askdialog/dialog-sdk';
+import { Dialog, SearchController, SearchControllerState, SearchHit, SearchSection, SearchSurface, Theme } from '@askdialog/dialog-sdk';
 export interface UseDialogSearchOptions {
     client: Dialog;
-    /** Where the results are displayed, for search analytics. */
+    /** Lowercase ISO 639-1 language code, e.g. `fr`. */
+    language: string;
+    /** ISO 4217 currency, independent of language. */
+    currency: string;
+    /** UI surface used in search analytics. */
     surface?: SearchSurface;
-    /** Router adapter called after selection attribution; omit to let the cards' `<a href>` navigate natively. */
+    /** Navigate after recording selection; omit to use native links. */
     navigate?: (url: string, hit: SearchHit) => void;
     debounceMs?: number;
     hitsPerPage?: number;
-    /** Storefront locale for the searched index (`products_fr`); defaults to the client's. */
-    locale?: string;
+    /**
+     * Extra indices searched alongside the products, e.g. `[{ index: 'collections', hitsPerPage: 5 }]`.
+     * Only request an index the catalog exposes: a missing one fails the whole search.
+     */
+    sections?: readonly SearchSection[];
 }
 export interface DialogSearch {
     controller: SearchController;
     state: SearchControllerState;
+    /** The client's theme, for `DialogSearchResults`. */
+    theme: Theme;
 }
-/** Options are read when the controller is created — later changes don't rebind a live controller. */
+/** Options are fixed when the controller is created. */
 export declare const useDialogSearch: (options: UseDialogSearchOptions) => DialogSearch;

package/dist/components/index.d.ts

@@ -3,5 +3,5 @@ export { DialogInput } from './DialogProductBlock/DialogInput';
 export { DialogSearchBar } from './DialogSearch/DialogSearchBar';
 export { DialogSearchPagination } from './DialogSearch/DialogSearchPagination';
 export { DialogSearchProductCard } from './DialogSearch/DialogSearchProductCard';
-export { DialogSearchResults } from './DialogSearch/DialogSearchResults';
+export { DialogSearchResults, type SearchProductsLayout, } from './DialogSearch/DialogSearchResults';
 export { useDialogSearch, type DialogSearch, type UseDialogSearchOptions, } from './DialogSearch/useDialogSearch';

package/dist/dialog-react.css

@@ -1 +1 @@
-.dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}.dialog-search-bar{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 10px 10px 14px;background:#fffc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-bar:focus-within{border-color:#00000026;box-shadow:0 6px 20px -6px #0000001a,0 0 0 2px #1717171f}.dialog-search-bar-field{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:6px;padding:2px 0}.dialog-search-bar-icon{display:inline-flex;flex-shrink:0;color:#737373}.dialog-search-bar-input{flex:1 0 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#171717;text-overflow:ellipsis;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.dialog-search-bar-input::placeholder{color:#a3a3a3;opacity:1}.dialog-search-bar-input:focus,.dialog-search-bar-input:focus-visible{outline:none;box-shadow:none;border:none}.dialog-search-bar-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:6px;border:none;border-radius:9999px;background:#171717;color:#fff;box-shadow:0 1px 1px #1717170d;cursor:pointer}.dialog-search-bar-submit:focus-visible{outline:2px solid #171717;outline-offset:2px}.dialog-search-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-pagination button{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font:inherit;color:inherit;cursor:pointer;transition:background-color .12s ease}.dialog-search-pagination button:hover:not(:disabled){background-color:#fafafa}.dialog-search-pagination button:disabled{opacity:.4;cursor:default}.dialog-search-card{width:100%}.dialog-search-card-body{display:flex;align-items:center;gap:8px;border-radius:12px;color:inherit;text-decoration:none}a.dialog-search-card-body:hover{background:#00000008}.dialog-search-card-image{position:relative;flex-shrink:0;width:64px;height:64px;border-radius:12px;overflow:hidden;background:#f2f2f2}.dialog-search-card-image:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:12px;background:#00000008;pointer-events:none}.dialog-search-card-image img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-card-info{display:flex;flex:1 1 0;min-width:0;flex-direction:column;gap:4px}.dialog-search-card-title{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dialog-search-card-price{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:12px;line-height:16px;color:#737373}.dialog-search-panel{position:fixed;z-index:9999;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;margin:0;padding:10px 14px;background:#ffffffe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-status{margin:0;font-family:Inter,sans-serif;font-weight:500;font-size:14px;line-height:20px;color:#a3a3a3}.dialog-search-status-error{color:#b3261e}.dialog-search-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.dialog-search-retry{margin:0;padding:6px 14px;border:1px solid rgba(0,0,0,.05);border-radius:9999px;background:#fff;font-family:Inter,sans-serif;font-weight:500;font-size:13px;line-height:20px;color:#737373;cursor:pointer;transition:background-color .12s ease}.dialog-search-retry:hover{background-color:#fafafa}.dialog-search-results{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;max-height:480px;min-height:0;overflow-y:auto}
+.dialog-block-header-container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.dialog-block-title{color:var(--dialog-theme-title-color, #272727);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-title-font-size);font-style:normal;font-weight:500;line-height:20px;letter-spacing:1.3px;text-transform:uppercase}.dialog-block-description{color:var(--dialog-theme-description-color, #6c6c6c);font-family:var(--dialog-theme-font-family);font-size:var(--dialog-theme-description-font-size);font-style:normal;font-weight:500;line-height:20px}.dialog-block-suggestions-item{background-color:#f1f1f1;border:none;outline:none;padding:12px 16px;width:fit-content;cursor:pointer;display:flex;justify-content:flex-start;background-color:#fff;align-items:center;gap:8px;border:1px solid #dddce2;border-radius:24px}.dialog-block-suggestions-item:hover{transform:scale(1.01)}.dialog-block-suggestions-item-label{color:var(--dialog-theme-content-color, #575665);font-size:var(--dialog-theme-content-font-size, 14px);font-weight:500;text-align:start;flex:1}.dialog-block-suggestions-item-icon path{stroke:var(--dialog-theme-primary-color)}.dialog-block-suggestions-skeleton-item,.dialog-block-suggestions-skeleton-item:empty{display:block;width:100%;width:90%;height:18px;border-radius:18px;padding:12px 16px;background-color:#f1f1f1;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{background-color:#f1f1f1}50%{background-color:#fff}to{background-color:#f1f1f1}}.dialog-block-suggestions-container{display:flex;flex-direction:column;gap:12px;width:100%}.dialog-input-wrapper{position:relative;width:100%;height:50px;max-height:50px;padding:16px 20px;border:1px solid #d9d9d9;border-radius:var(--dialog-theme-cta-border-type, 24px);background:#fff;display:flex;align-items:center;box-sizing:border-box}.dialog-input-container{display:flex;justify-items:center;align-items:center;gap:12px;width:100%;height:100%}.dialog-ask-anything-input-ai-input{outline:unset;box-shadow:unset;border:unset;width:100%;font-size:16px;background:transparent;padding-inline-end:35px}.dialog-input-submit{width:40px;height:40px;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:var(--dialog-theme-primary-color);position:absolute;cursor:pointer;top:calc(50% - 20px);inset-inline-end:4px;border:unset}.dialog-input-submit:disabled{opacity:.5}.dialog-block-container{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:24px 0;width:fit-content;gap:24px}.dialog-block-container>*{box-sizing:border-box}.dialog-search-bar{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:10px 10px 10px 14px;background:#fffc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.05);border-radius:24px;box-shadow:0 6px 20px -6px #0000001a}.dialog-search-bar:focus-within{border-color:#00000026;box-shadow:0 6px 20px -6px #0000001a,0 0 0 2px #1717171f}.dialog-search-bar-field{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:6px;padding:2px 0}.dialog-search-bar-icon{display:inline-flex;flex-shrink:0;color:#737373}.dialog-search-bar-input{flex:1 0 0;min-width:0;margin:0;padding:0;border:none;outline:none;background:transparent;font-family:Inter,sans-serif;font-weight:500;font-size:16px;line-height:24px;color:#171717;text-overflow:ellipsis;box-shadow:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.dialog-search-bar-input::placeholder{color:#a3a3a3;opacity:1}.dialog-search-bar-input:focus,.dialog-search-bar-input:focus-visible{outline:none;box-shadow:none;border:none}.dialog-search-bar-submit{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:6px;border:none;border-radius:9999px;background:#171717;color:#fff;box-shadow:0 1px 1px #1717170d;cursor:pointer}.dialog-search-bar-submit:focus-visible{outline:2px solid #171717;outline-offset:2px}.dialog-search-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:4px 0;font-size:12px;color:var(--dso-text-sec, #737373)}.dialog-search-pagination button{margin:0;padding:6px 14px;border:1px solid var(--dso-border, rgba(0, 0, 0, .1));border-radius:var(--dso-r-btn, 10px);background:transparent;font:inherit;color:var(--dso-text, #171717);cursor:pointer;transition:background-color .12s ease}.dialog-search-pagination button:hover:not(:disabled){background-color:var(--dso-hover, rgba(0, 0, 0, .04))}.dialog-search-pagination button:disabled{opacity:.4;cursor:default}.dialog-search-card{width:100%}.dialog-search-product{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;padding:8px;border-radius:var(--dso-r-item);color:inherit;text-decoration:none}a.dialog-search-product:hover{background:var(--dso-hover)}.dialog-search-product-thumb{flex:none;width:56px;height:56px;overflow:hidden;border:1px solid var(--dso-border);border-radius:var(--dso-r-thumb);background:var(--dso-thumb)}.dialog-search-product-thumb img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-product-title{flex:1;min-width:0;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.dialog-search-product-price{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.dialog-search-match{font-weight:600}.dialog-search-muted{opacity:.55}@media(min-width:768px){.dialog-search-panel--grid .dialog-search-product{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;border:1px solid var(--dso-border)}.dialog-search-panel--grid .dialog-search-product-thumb{width:100%;height:auto;aspect-ratio:4 / 3;border:0}}@media(max-width:767px){.dialog-search-product{grid-template-columns:52px minmax(0,1fr) auto;gap:12px}.dialog-search-product-thumb{width:52px;height:52px}.dialog-search-product-price{font-size:14px}}.dialog-search-collections{display:flex;flex-direction:column;gap:4px;min-height:0;padding:20px 12px 20px 24px;border-right:1px solid var(--dso-border);background:var(--dso-side);overflow-y:auto}.dialog-search-collection-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}.dialog-search-collection{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--dso-r-item);color:inherit;text-decoration:none}.dialog-search-collection:hover{background:var(--dso-hover)}.dialog-search-collection-thumb{flex:none;width:40px;height:40px;overflow:hidden;border-radius:var(--dso-r-thumb);background:var(--dso-thumb)}.dialog-search-collection-thumb img{display:block;width:100%;height:100%;object-fit:cover}.dialog-search-collection-title{flex:1;min-width:0;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.dialog-search-caret{display:inline-flex;flex:none;color:var(--dso-text-sec)}@media(max-width:767px){.dialog-search-collections{flex:none;gap:10px;padding:0;border-right:0;background:transparent;overflow:visible}.dialog-search-collections .dialog-search-section-head{padding:0 16px}.dialog-search-collection-list{flex-direction:row;gap:10px;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dialog-search-collection-list::-webkit-scrollbar{display:none}.dialog-search-collection{flex:none;flex-direction:column;align-items:stretch;gap:8px;width:80px;padding:0}.dialog-search-collection-thumb{width:80px;height:50px;border-radius:var(--dso-r-item)}.dialog-search-collection-title{font-size:13px}.dialog-search-caret{display:none}}.dialog-search-panel{position:fixed;z-index:9999;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;background:var(--dso-panel);border-radius:var(--dso-r-panel);box-shadow:0 24px 64px #00000047;overflow:hidden;font-family:var(--dso-font, inherit);font-size:14px;line-height:1.35;color:var(--dso-text);-webkit-font-smoothing:antialiased}.dialog-search-panel *,.dialog-search-panel *:before,.dialog-search-panel *:after{box-sizing:border-box}.dialog-search-status{margin:0;padding:16px 24px;color:var(--dso-text-sec)}.dialog-search-status-error{color:#b3261e}.dialog-search-error{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:16px}.dialog-search-retry{margin:0 24px;padding:6px 14px;border:1px solid var(--dso-border);border-radius:var(--dso-r-btn);background:transparent;font:inherit;font-size:13px;color:var(--dso-text);cursor:pointer;transition:background-color .12s ease}.dialog-search-retry:hover{background-color:var(--dso-hover)}.dialog-search-body{display:grid;grid-template-columns:340px minmax(0,1fr);flex:1;min-height:0}.dialog-search-body--no-collections{grid-template-columns:minmax(0,1fr)}.dialog-search-section-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 12px 8px}.dialog-search-label{margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dso-text-sec)}.dialog-search-label-count{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}.dialog-search-count{font-size:12px;color:var(--dso-text-sec)}.dialog-search-products{display:flex;flex-direction:column;gap:14px;min-height:0;padding:20px 24px 12px;overflow-y:auto}.dialog-search-products .dialog-search-section-head{padding:0 8px}.dialog-search-results{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}.dialog-search-empty{padding:8px;color:var(--dso-text-sec)}.dialog-search-footer{display:flex;justify-content:flex-end;align-items:center;flex:none;padding:14px 24px;border-top:1px solid var(--dso-border)}.dialog-search-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border:1px solid var(--dso-primary);border-radius:var(--dso-r-btn);background:var(--dso-primary);color:var(--dso-cta-text);font-size:14px;font-weight:500;text-decoration:none}.dialog-search-cta:hover{filter:brightness(.95)}.dialog-search-footer .dialog-search-pagination{flex:1}@media(min-width:768px){.dialog-search-panel--grid .dialog-search-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}@media(max-width:767px){.dialog-search-body{display:flex;flex-direction:column;gap:18px;padding-top:16px;overflow-y:auto}.dialog-search-products{gap:6px;padding:0 8px 8px;overflow:visible}.dialog-search-footer{padding:12px 16px}.dialog-search-cta{width:100%;height:44px}.dialog-search-cta svg{display:none}}