/* ============================================================================
 * Seekora UI SDK — Component Stylesheet
 *
 * Canonical CSS for storefront-rendered components. Replaces the
 * `style={{ ... }}` inline-everything pattern that prevented theme overrides.
 *
 * RULES (pattern):
 *
 *  1. Every rule uses CSS custom properties via `var(--seekora-<scope>-<prop>, <fallback>)`.
 *     Storefront sets `--seekora-primary` etc. via ThemeInjector → these cascade in.
 *
 *  2. Class naming follows BEM:
 *       .seekora-<component>                 (root, e.g. .seekora-results)
 *       .seekora-<component>__<element>      (child, e.g. .seekora-results__card)
 *       .seekora-<component>--<modifier>     (root variant, e.g. .seekora-results--grid)
 *
 *  3. Variants are encoded as root modifier classes OR `data-variant="X"` attrs.
 *     Prefer data-attrs for component-internal switches (no class soup).
 *
 *  4. NO `!important` unless overriding theme styles that hijack the cascade.
 *     EXCEPTION: see seekora-override layer below — a small allowlist of truly
 *     non-negotiable properties uses !important to survive theme !important.
 *
 *  5. Sized/spacing values reference the existing var system:
 *       --seekora-spacing-{xs,sm,md,lg,xl}
 *       --seekora-border-radius{-lg,-full}
 *       --seekora-font-size{-xs,-sm,-base,...}
 *       --seekora-font-weight-{medium,semibold,bold}
 *
 *  6. Color values reference primary / text / bg vars:
 *       --seekora-primary, --seekora-primary-text, --seekora-primary-alpha
 *       --seekora-text-primary, --seekora-text-secondary
 *       --seekora-bg-surface, --seekora-bg-hover
 *       --seekora-border-color, --seekora-border-radius
 *
 *  7. Component-scoped escape vars (`--seekora-<component>-X`) declared inside
 *     the component selector, defaulting to the global token. This lets merchants
 *     tweak ONE component without affecting siblings.
 *
 * LAYER STRATEGY (SCRUM-268 #30 — embedded-context override resistance):
 *
 *  CSS @layer cascade order (later = higher priority):
 *    seekora-base  <  seekora-component  <  seekora-override
 *
 *  - seekora-base:      reset / typography defaults — theme may freely override these.
 *  - seekora-component: bulk of component rules (padding, border, color, layout).
 *                       Wraps ALL existing rules below.
 *  - seekora-override:  critical layout rules that MUST win against theme injection:
 *                         - dropdown position / z-index
 *                         - portal container position:fixed / z-index
 *                         - overflow on scrollable containers
 *                         - display:flex|grid on layout containers
 *                         - input padding / font-size (theme sets huge values that break layout)
 *                         - dropdown background-color (must be opaque vs theme transparent)
 *                       Uses [data-seekora-surface] attribute-selector prefix (0,2,0
 *                       specificity) to beat plain element rules. For rules that must
 *                       also survive theme !important, the property is marked !important
 *                       — see inline OVERRIDE-CRITICAL comments.
 *
 *  Theme rules without a layer sit in the implicit-outer (highest-priority) layer and
 *  normally win over layered rules. The seekora-override layer + specificity bump is
 *  what lets us selectively win the specific battles that matter for embedded widgets.
 *
 * SCRUM-268. See docs/specs/2026-05-23-storefront-layout-engine-design.md.
 * ============================================================================ */

/* Layer order declaration — MUST appear before any @layer usage */
@layer seekora-base, seekora-component, seekora-override;

/* ─── seekora-base: typography / reset defaults ──────────────────────────── */
@layer seekora-base {
  /* Box-sizing reset scoped to seekora components */
  [data-seekora-surface],
  [data-seekora-surface] *,
  [data-seekora-surface] *::before,
  [data-seekora-surface] *::after {
    box-sizing: border-box;
  }

  /* Font-family inheritance: let the theme control font, but set a safe fallback */
  [data-seekora-surface] {
    font-family: var(
      --seekora-font-family,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif
    );
    line-height: var(--seekora-line-height, 1.5);
  }
}

/* ─── seekora-component: all component rules ─────────────────────────────── */
@layer seekora-component {
  /* ─── Stats ─────────────────────────────────────────────────────────────── */
  .seekora-stats {
    font-size: var(
      --seekora-stats-font-size,
      var(--seekora-font-size-base, 1rem)
    );
    color: var(--seekora-stats-color, var(--seekora-text-primary, #212529));
    background: var(--seekora-stats-bg, transparent);
  }

  .seekora-stats__count {
    transition: opacity 250ms ease-in-out;
  }

  .seekora-stats__count--animating {
    opacity: 0;
  }

  .seekora-stats[data-variant="detailed"] {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-stats__separator {
    margin: 0 var(--seekora-spacing-xs, 4px);
    color: var(--seekora-text-secondary, #6c757d);
  }

  /* Badge sub-elements */
  .seekora-stats__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--seekora-spacing-xs, 4px);
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    background: var(
      --seekora-stats-badge-bg,
      var(--seekora-primary-alpha, rgba(77, 102, 254, 0.1))
    );
    color: var(--seekora-stats-badge-color, var(--seekora-primary, #4d66fe));
    border-radius: var(--seekora-border-radius, 6px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-stats__badge-label {
    font-weight: var(--seekora-font-weight-medium, 500);
  }

  .seekora-stats__badge-value {
    font-weight: var(--seekora-font-weight-semibold, 600);
    transition: opacity 250ms ease-in-out;
  }

  /* Badge container: override the root display to wrap multiple badges */
  .seekora-stats[data-variant="badge"] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-xs, 4px);
    background: transparent;
  }

  /* Detailed variant row */
  .seekora-stats__row {
    display: flex;
    justify-content: space-between;
    gap: var(--seekora-spacing-md, 12px);
  }

  /* Detailed sub-elements */
  .seekora-stats__label {
    color: var(--seekora-text-secondary, #6c757d);
    font-weight: var(--seekora-font-weight-medium, 500);
  }

  .seekora-stats__value {
    color: var(--seekora-text-primary, #212529);
    font-weight: var(--seekora-font-weight-semibold, 600);
  }

  /* ─── ClearRefinements ──────────────────────────────────────────────────── */
  .seekora-clear-refinements {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    background: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #fff);
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
  }

  .seekora-clear-refinements:hover {
    background: var(--seekora-primary-dark, #3a52d4);
  }

  .seekora-clear-refinements:disabled,
  .seekora-clear-refinements[aria-disabled="true"] {
    opacity: 0;
    pointer-events: none;
    display: none;
  }

  .seekora-clear-refinements[data-variant="link"] {
    background: transparent;
    color: var(--seekora-text-secondary, #6c757d);
    text-decoration: underline;
    padding: 0;
    font-weight: var(--seekora-font-weight-medium, 500);
  }
  .seekora-clear-refinements[data-variant="chip"] {
    padding: 4px 12px;
    border-radius: var(--seekora-border-radius-full, 9999px);
    background: var(--seekora-primary-alpha, rgba(77, 102, 254, 0.1));
    color: var(--seekora-primary, #4d66fe);
  }

  /* ─── Pagination ────────────────────────────────────────────────────────── */
  .seekora-pagination {
    display: flex;
    align-items: center;
    justify-content: var(--seekora-pagination-alignment, center);
    flex-wrap: wrap;
    list-style: none;
    margin: var(--seekora-spacing-lg, 24px) 0 0;
    padding: 0;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-pagination__item {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    min-width: 40px;
    min-height: 40px;
    border: 1px solid
      var(--seekora-pagination-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(--seekora-border-radius, 6px);
    background: var(--seekora-pagination-bg, var(--seekora-bg-surface, #fff));
    color: var(
      --seekora-pagination-color,
      var(--seekora-text-primary, #212529)
    );
    font-size: var(--seekora-font-size-base, 1rem);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .seekora-pagination__item--active {
    background: var(
      --seekora-pagination-active-bg,
      var(--seekora-primary, #4d66fe)
    );
    color: var(
      --seekora-pagination-active-color,
      var(--seekora-primary-text, #fff)
    );
    font-weight: var(--seekora-font-weight-bold, 700);
  }

  .seekora-pagination__item:disabled,
  .seekora-pagination__item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .seekora-pagination__ellipsis {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    color: var(
      --seekora-pagination-color,
      var(--seekora-text-primary, #212529)
    );
    font-size: var(--seekora-font-size-base, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .seekora-pagination__list {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-xs, 4px);
    outline: none;
  }

  .seekora-pagination__page-info {
    font-size: var(--seekora-font-size-base, 1rem);
    color: var(
      --seekora-pagination-color,
      var(--seekora-text-primary, #212529)
    );
    padding: 0 var(--seekora-spacing-sm, 8px);
    white-space: nowrap;
  }

  .seekora-pagination__page-info-item {
    margin-left: var(--seekora-spacing-sm, 8px);
  }

  /* ── load-more variant ───────────────────────────────────────────── */

  .seekora-pagination[data-variant="load-more"] {
    flex-direction: column;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
  }

  .seekora-pagination__load-more-btn {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-lg, 24px);
    border: none;
    border-radius: var(
      --seekora-pagination-radius,
      var(--seekora-border-radius, 6px)
    );
    background: var(
      --seekora-pagination-active-bg,
      var(--seekora-primary, #4d66fe)
    );
    color: var(
      --seekora-pagination-active-color,
      var(--seekora-primary-text, #fff)
    );
    cursor: pointer;
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    transition: background-color 150ms ease-in-out, opacity 150ms ease-in-out;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--seekora-spacing-xs, 4px);
    font-family: inherit;
  }

  .seekora-pagination__load-more-btn:hover {
    background: var(--seekora-primary-dark, #3a52d4);
  }

  .seekora-pagination__load-more-text {
    opacity: 0.85;
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  /* ── simple variant ──────────────────────────────────────────────── */

  .seekora-pagination[data-variant="simple"] {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--seekora-spacing-md, 16px);
    flex-wrap: nowrap;
  }

  .seekora-pagination__simple-btn {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
    border: 1px solid
      var(--seekora-pagination-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(
      --seekora-pagination-radius,
      var(--seekora-border-radius, 6px)
    );
    background: var(--seekora-pagination-bg, var(--seekora-bg-surface, #fff));
    color: var(
      --seekora-pagination-color,
      var(--seekora-text-primary, #212529)
    );
    cursor: pointer;
    font-size: var(--seekora-font-size-base, 1rem);
    min-width: 40px;
    transition: background-color 150ms ease-in-out, opacity 150ms ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
  }

  .seekora-pagination__simple-btn:disabled,
  .seekora-pagination__simple-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ── size variants ───────────────────────────────────────────────── */

  /* small */
  .seekora-pagination[data-size="small"] .seekora-pagination__item,
  .seekora-pagination[data-size="small"] .seekora-pagination__simple-btn,
  .seekora-pagination[data-size="small"] .seekora-pagination__load-more-btn {
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    min-width: 32px;
    min-height: 32px;
  }

  .seekora-pagination[data-size="small"] .seekora-pagination__page-info,
  .seekora-pagination[data-size="small"] .seekora-pagination__ellipsis {
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  /* large */
  .seekora-pagination[data-size="large"] .seekora-pagination__item,
  .seekora-pagination[data-size="large"] .seekora-pagination__simple-btn,
  .seekora-pagination[data-size="large"] .seekora-pagination__load-more-btn {
    padding: var(--seekora-spacing-md, 16px) var(--seekora-spacing-lg, 24px);
    font-size: var(--seekora-font-size-lg, 1.125rem);
    min-width: 48px;
    min-height: 48px;
  }

  .seekora-pagination[data-size="large"] .seekora-pagination__page-info,
  .seekora-pagination[data-size="large"] .seekora-pagination__ellipsis {
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  /* ─── SortBy / CustomSelect (used by SortBy) ────────────────────────────── */
  .seekora-sort {
    --seekora-sort-bg: var(--seekora-bg-surface, #fff);
    --seekora-sort-color: var(--seekora-text-primary, #212529);
    --seekora-sort-border: var(--seekora-border-color, #dee2e6);
    --seekora-sort-active-bg: var(--seekora-primary, #4d66fe);
    --seekora-sort-active-color: var(--seekora-primary-text, #fff);
    display: inline-block;
  }

  /* ── label ───────────────────────────────────────────────────────────────── */

  .seekora-sort__label {
    display: block;
    margin-bottom: var(--seekora-spacing-xs, 4px);
    font-size: var(--seekora-font-size-base, 1rem);
    color: var(--seekora-sort-color);
    font-weight: var(--seekora-font-weight-medium, 500);
  }

  .seekora-sort[data-size="small"] .seekora-sort__label {
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-sort[data-size="large"] .seekora-sort__label {
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  /* ── dropdown variant ────────────────────────────────────────────────────── */

  .seekora-sort[data-variant="dropdown"] {
    display: inline-block;
  }

  .seekora-sort__select {
    width: 100%;
  }

  /* ── trigger (CustomSelect button) ──────────────────────────────────────── */

  .seekora-sort__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--seekora-spacing-sm, 8px);
    width: 100%;
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    font-size: var(--seekora-font-size-base, 1rem);
    border: 1px solid var(--seekora-sort-border);
    border-radius: var(--seekora-border-radius, 6px);
    background: var(--seekora-sort-bg);
    color: var(--seekora-sort-color);
    cursor: pointer;
    outline: none;
    text-align: left;
    font-family: inherit;
  }

  .seekora-sort__trigger:focus-visible {
    border-color: var(--seekora-border-focus, var(--seekora-primary, #4d66fe));
    box-shadow: 0 0 0 2px
      var(--seekora-border-focus-alpha, rgba(77, 102, 254, 0.2));
  }

  .seekora-sort[data-size="small"] .seekora-sort__trigger {
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-sort[data-size="large"] .seekora-sort__trigger {
    padding: var(--seekora-spacing-md, 16px) var(--seekora-spacing-lg, 24px);
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  /* ── button-group variant ────────────────────────────────────────────────── */

  .seekora-sort[data-variant="button-group"] {
    display: inline-block;
  }

  .seekora-sort__button-group {
    display: inline-flex;
    border-radius: var(--seekora-border-radius, 6px);
    overflow: hidden;
    border: 1px solid var(--seekora-sort-border);
  }

  .seekora-sort__button-group-item {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    font-size: var(--seekora-font-size-base, 1rem);
    border: none;
    border-right: 1px solid var(--seekora-sort-border);
    background: var(--seekora-sort-bg);
    color: var(--seekora-sort-color);
    cursor: pointer;
    font-weight: var(--seekora-font-weight-normal, 400);
    transition: background-color 150ms ease, color 150ms ease;
    outline: none;
    font-family: inherit;
  }

  .seekora-sort__button-group-item[data-last] {
    border-right: none;
  }

  .seekora-sort__button-group-item--active,
  .seekora-sort__button-group-item[aria-pressed="true"] {
    background: var(--seekora-sort-active-bg);
    color: var(--seekora-sort-active-color);
    font-weight: var(--seekora-font-weight-semibold, 600);
  }

  .seekora-sort__button-group-item:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
  }

  .seekora-sort[data-size="small"] .seekora-sort__button-group-item {
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-sort[data-size="large"] .seekora-sort__button-group-item {
    padding: var(--seekora-spacing-md, 16px) var(--seekora-spacing-lg, 24px);
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  /* ── radio-group variant ─────────────────────────────────────────────────── */

  .seekora-sort[data-variant="radio-group"] {
    display: block;
  }

  .seekora-sort__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-sort__radio-item {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    background: transparent;
    color: var(--seekora-sort-color);
    font-weight: var(--seekora-font-weight-normal, 400);
    transition: background-color 150ms ease, color 150ms ease;
  }

  .seekora-sort__radio-item--active,
  .seekora-sort__radio-item[data-active] {
    background: var(--seekora-sort-active-bg);
    color: var(--seekora-sort-active-color);
    font-weight: var(--seekora-font-weight-semibold, 600);
  }

  .seekora-sort__radio-input {
    margin: 0;
  }

  .seekora-sort__radio-label {
    font-size: var(--seekora-font-size-base, 1rem);
  }

  .seekora-sort[data-size="small"] .seekora-sort__radio-item {
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
  }

  .seekora-sort[data-size="small"] .seekora-sort__radio-label {
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-sort[data-size="large"] .seekora-sort__radio-item {
    padding: var(--seekora-spacing-md, 16px) var(--seekora-spacing-lg, 24px);
  }

  .seekora-sort[data-size="large"] .seekora-sort__radio-label {
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  .seekora-sort[data-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ─── Facets ────────────────────────────────────────────────────────────── */
  .seekora-facets {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-lg, 24px);
  }

  .seekora-facet {
    padding: var(--seekora-spacing-md, 16px);
    background: var(--seekora-facet-bg, transparent);
    border: 1px solid
      var(--seekora-facet-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(--seekora-border-radius, 6px);
  }

  .seekora-facet__title {
    margin: 0 0 var(--seekora-spacing-md, 12px);
    color: var(--seekora-text-primary, #212529);
    font-weight: var(--seekora-font-weight-semibold, 600);
    text-transform: capitalize;
  }

  .seekora-facet__item {
    display: flex;
    align-items: center;
    padding: var(--seekora-spacing-sm, 8px);
    cursor: pointer;
    border-radius: var(--seekora-border-radius, 6px);
    margin-bottom: var(--seekora-spacing-xs, 4px);
    background: transparent;
    transition: background-color 150ms ease;
  }

  .seekora-facet__item:hover {
    background: var(--seekora-bg-hover, rgba(0, 0, 0, 0.04));
  }

  /* Keyboard navigation focus ring — aria-activedescendant pattern */
  .seekora-facet__list[aria-activedescendant]
    .seekora-facet__item[data-active="true"] {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
  }

  .seekora-facet__item[aria-selected="true"],
  .seekora-facet__item[aria-checked="true"] {
    background: var(
      --seekora-facet-active-bg,
      var(--seekora-primary-alpha, rgba(77, 102, 254, 0.1))
    );
  }

  .seekora-facet__checkbox {
    margin-right: var(--seekora-spacing-sm, 8px);
    cursor: pointer;
  }

  .seekora-facet__label {
    flex: 1 1 0%;
    font-size: var(--seekora-font-size-base, 1rem);
    line-height: 1.5;
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-facet__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: 0.1em 0.5em;
    margin-left: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    line-height: 1;
    color: var(
      --seekora-facet-count-color,
      var(--seekora-text-secondary, #495057)
    );
    background: var(--seekora-facet-count-bg, var(--seekora-bg-hover, #e9ecef));
    border-radius: var(--seekora-border-radius-full, 9999px);
    flex-shrink: 0;
  }

  /* ─── Facets — additional variant / element rules ───────────────────────── */

  /* Chevron icon rotation for collapsible */
  .seekora-facet__chevron {
    flex-shrink: 0;
    transition: transform 200ms ease;
  }

  .seekora-facet__chevron--expanded {
    transform: rotate(180deg);
  }

  /* Search input within a facet group */
  .seekora-facet__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--seekora-spacing-sm, 8px);
    margin-bottom: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    border: 1px solid
      var(--seekora-facet-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(--seekora-border-radius, 6px);
    outline: none;
    color: var(--seekora-text-primary, #212529);
    background: var(--seekora-facet-bg, transparent);
    font-family: inherit;
  }

  .seekora-facet__search-input:focus-visible {
    border-color: var(--seekora-primary, #4d66fe);
    box-shadow: 0 0 0 2px var(--seekora-primary-alpha, rgba(77, 102, 254, 0.2));
  }

  /* Facet list wrapper */
  .seekora-facet__list {
    outline: none;
  }

  /* Show more / less button */
  .seekora-facet__show-more {
    margin-top: var(--seekora-spacing-xs, 4px);
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    border: none;
    background: transparent;
    color: var(--seekora-primary, #4d66fe);
    cursor: pointer;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    text-decoration: underline;
    font-family: inherit;
  }

  /* ── color-swatch variant ────────────────────────────────────────── */

  .seekora-facet[data-variant="color-swatch"] .seekora-facet__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-sm, 8px);
  }

  .seekora-facet__item--swatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin: var(--seekora-spacing-xs, 4px);
    background: transparent;
    border-radius: 0;
    padding: 0;
  }

  .seekora-facet__item--swatch:hover {
    background: transparent;
  }

  .seekora-facet__swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--seekora-facet-swatch-size, 32px);
    height: var(--seekora-facet-swatch-size, 32px);
    border-radius: 50%;
    background: var(--seekora-facet-swatch-color, #000);
    border: 2px solid
      var(--seekora-facet-border, var(--seekora-border-color, #dee2e6));
    position: relative;
    transition: border 200ms ease, box-shadow 200ms ease;
    cursor: pointer;
  }

  .seekora-facet__swatch--selected {
    border: 3px solid var(--seekora-primary, #4d66fe);
    box-shadow: 0 0 0 2px var(--seekora-primary-alpha, rgba(77, 102, 254, 0.33));
  }

  .seekora-facet__swatch-inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Label below swatch */
  .seekora-facet[data-variant="color-swatch"] .seekora-facet__label {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, #212529);
    margin-top: 0.25rem;
    text-align: center;
    max-width: calc(var(--seekora-facet-swatch-size, 32px) + 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seekora-facet__swatch-count {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(
      --seekora-facet-count-color,
      var(--seekora-text-secondary, #495057)
    );
    line-height: 1;
    margin-top: 0.125rem;
  }

  /* ── collapsible variant ─────────────────────────────────────────── */

  .seekora-facet[data-variant="collapsible"] {
    overflow: hidden;
    padding: 0;
  }

  .seekora-facet__collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--seekora-spacing-md, 16px);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }

  .seekora-facet__collapsible-header:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
  }

  .seekora-facet[data-variant="collapsible"] .seekora-facet__title {
    flex: 1;
    margin: 0;
  }

  .seekora-facet__collapsible-icon {
    display: flex;
    align-items: center;
    margin-left: var(--seekora-spacing-sm, 8px);
    color: var(--seekora-text-secondary, #6c757d);
  }

  /* ─── Breadcrumb ────────────────────────────────────────────────────────── */
  .seekora-breadcrumb {
    --seekora-breadcrumb-color: var(--seekora-primary, #4d66fe);
    --seekora-breadcrumb-color-current: var(--seekora-text-primary, #212529);
    --seekora-breadcrumb-color-separator: var(
      --seekora-text-secondary,
      #6c757d
    );
  }

  .seekora-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-breadcrumb__item {
    display: inline-flex;
    align-items: center;
  }

  .seekora-breadcrumb__separator {
    margin: 0 var(--seekora-spacing-xs, 4px);
    color: var(--seekora-breadcrumb-color-separator);
    user-select: none;
  }

  .seekora-breadcrumb__link {
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--seekora-breadcrumb-color);
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
    transition: opacity 150ms ease;
  }

  .seekora-breadcrumb__link:hover {
    opacity: 0.75;
    text-decoration: underline;
  }

  .seekora-breadcrumb__current,
  .seekora-breadcrumb__item [aria-current="page"] {
    color: var(--seekora-breadcrumb-color-current);
    font-weight: var(--seekora-font-weight-medium, 500);
  }

  .seekora-facet__collapsible-body {
    padding: 0 var(--seekora-spacing-md, 16px) var(--seekora-spacing-md, 16px);
  }

  /* ── size variants ───────────────────────────────────────────────── */

  .seekora-facet[data-size="small"] .seekora-facet__item {
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-facet[data-size="small"] .seekora-facet__title {
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-facet[data-size="small"] {
    --seekora-facet-swatch-size: 24px;
  }

  .seekora-facet[data-size="large"] .seekora-facet__item {
    padding: var(--seekora-spacing-md, 16px) var(--seekora-spacing-lg, 24px);
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  .seekora-facet[data-size="large"] .seekora-facet__title {
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  .seekora-facet[data-size="large"] {
    --seekora-facet-swatch-size: 40px;
  }

  /* ── range-buttons variant ───────────────────────────────────────── */

  .seekora-facet__range-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-sm, 8px);
  }

  .seekora-facet__range-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: var(--seekora-spacing-xs, 4px) 0.75em;
    font-size: var(--seekora-font-size-base, 1rem);
    border: 1px solid
      var(--seekora-facet-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(--seekora-border-radius-full, 9999px);
    background: var(--seekora-facet-bg, transparent);
    color: var(--seekora-text-primary, #212529);
    cursor: pointer;
    opacity: 1;
    transition: all 200ms ease;
    font-family: inherit;
  }

  .seekora-facet__range-btn--active {
    border-color: var(--seekora-primary, #4d66fe);
    background: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #fff);
  }

  .seekora-facet__range-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .seekora-facet__range-btn-count {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    opacity: 0.8;
  }

  /* ── range-slider variant ────────────────────────────────────────── */

  .seekora-facet__range-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--seekora-spacing-sm, 8px);
  }

  .seekora-facet[data-variant="range-slider"] .seekora-facet__title,
  .seekora-facet[data-variant="range-buttons"] .seekora-facet__title {
    margin-bottom: var(--seekora-spacing-sm, 8px);
  }

  /* Shared clear button for range facets */
  .seekora-facet__range-clear {
    padding: 0.15em 0.5em;
    border: none;
    background: transparent;
    color: var(--seekora-primary, #4d66fe);
    cursor: pointer;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    text-decoration: underline;
    font-family: inherit;
  }

  /* ── empty state ─────────────────────────────────────────────────── */

  .seekora-facets__empty {
    padding: var(--seekora-spacing-sm, 8px);
    color: var(--seekora-text-secondary, #6c757d);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  /* ─── SearchResults ─────────────────────────────────────────────────────── */
  .seekora-results {
    min-height: var(--seekora-results-min-height, 400px);
    min-width: var(--seekora-results-min-width, 100%);
  }

  .seekora-results__header {
    color: var(--seekora-text-primary, #212529);
    margin-bottom: var(--seekora-spacing-md, 16px);
    font-size: var(--seekora-font-size-base, 1rem);
  }

  .seekora-results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(
      --seekora-product-list-gap-desktop,
      var(--seekora-spacing-md, 16px)
    );
  }

  @media (max-width: 768px) {
    .seekora-results__grid {
      gap: var(
        --seekora-product-list-gap-mobile,
        var(--seekora-spacing-sm, 8px)
      );
    }
  }

  .seekora-results__card {
    border: 1px solid
      var(--seekora-card-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(--seekora-border-radius, 6px);
    overflow: hidden;
    background: var(--seekora-card-bg, var(--seekora-bg-surface, #fff));
    display: flex;
    flex-direction: column;
    transition: transform 200ms ease, box-shadow 200ms ease,
      border-color 200ms ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .seekora-results__card:hover {
    border-color: var(--seekora-primary, #4d66fe);
    box-shadow: var(--seekora-card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
  }

  .seekora-results__card:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
  }

  .seekora-results__card-image-wrap {
    width: 100%;
    aspect-ratio: var(--seekora-card-aspect-ratio, 1 / 1);
    overflow: hidden;
    background: var(--seekora-bg-hover, #f8f9fa);
  }

  .seekora-results__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
  }

  .seekora-results__card:hover .seekora-results__card-image {
    transform: scale(1.03);
  }

  .seekora-results__card-body {
    padding: var(--seekora-spacing-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-xs, 4px);
    flex: 1 1 auto;
  }

  .seekora-results__card-title {
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    margin: 0;
    color: var(--seekora-text-primary, #212529);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
  }

  .seekora-results__card-description {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
  }

  .seekora-results__card-price {
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-text-primary, #212529);
    margin-top: auto;
  }

  /* ─── SearchResults list variant (default) ─────────────────────────────── */
  /* In list mode the grid becomes a single-column stack with no gap. */
  .seekora-results[data-variant="list"] .seekora-results__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* card / grid variants: auto-fill responsive grid */
  .seekora-results[data-variant="card"] .seekora-results__grid,
  .seekora-results[data-variant="grid"] .seekora-results__grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  /* ─── SearchResults list item (used in list/default mode) ──────────────── */
  .seekora-results__item {
    display: flex;
    align-items: flex-start;
    gap: var(--seekora-spacing-md, 16px);
    padding: var(--seekora-spacing-md, 16px);
    border: 1px solid var(--seekora-border-color, #dee2e6);
    border-bottom: 1px solid var(--seekora-border-color, #dee2e6);
    border-radius: 0;
    margin-bottom: 0;
    background: var(--seekora-bg-surface, #fff);
    cursor: pointer;
    transition: background-color var(--seekora-transition, 250ms ease-in-out);
    text-decoration: none;
    color: inherit;
  }

  .seekora-results__item:hover,
  .seekora-results__item--active {
    background: var(--seekora-bg-hover, rgba(0, 0, 0, 0.04));
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
  }

  .seekora-results__item-image {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: var(--seekora-border-radius, 6px);
    flex-shrink: 0;
  }

  .seekora-results__item-body {
    flex: 1;
    min-width: 0;
  }

  .seekora-results__item-title {
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    margin: 0 0 var(--seekora-spacing-xs, 4px);
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-results__item-link {
    color: inherit;
    text-decoration: none;
  }

  .seekora-results__item-link:hover {
    text-decoration: underline;
  }

  .seekora-results__item-description {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
    margin: 0 0 var(--seekora-spacing-xs, 4px);
    opacity: 0.8;
  }

  .seekora-results__item-price {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-primary, #4d66fe);
  }

  /* card active state */
  .seekora-results__card--active {
    border-color: var(--seekora-primary, #4d66fe);
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
    background: var(--seekora-bg-hover, rgba(0, 0, 0, 0.04));
    box-shadow: var(--seekora-card-hover-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));
  }

  /* Empty / loading / error states */
  .seekora-results__empty,
  .seekora-results__loading,
  .seekora-results__error {
    padding: var(--seekora-spacing-xl, 48px) var(--seekora-spacing-md, 16px);
    text-align: center;
    color: var(--seekora-text-secondary, #6c757d);
  }

  .seekora-results__error {
    color: var(--seekora-error, #dc3545);
  }

  /* data-state shorthands */
  .seekora-results[data-state="loading"] {
    opacity: 0.6;
    pointer-events: none;
  }

  .seekora-results[data-state="empty"] .seekora-results__grid,
  .seekora-results[data-state="error"] .seekora-results__grid {
    display: none;
  }

  /* ─── CurrentRefinements (chips / pills) ────────────────────────────── */
  .seekora-current-refinements {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-xs, 4px);
    align-items: center;
  }
  .seekora-current-refinements[data-layout="vertical"] {
    flex-direction: column;
    align-items: flex-start;
  }
  .seekora-current-refinements__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--seekora-border-radius-full, 9999px);
    background: var(--seekora-primary-alpha, rgba(77, 102, 254, 0.1));
    color: var(--seekora-primary, #4d66fe);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    animation: seekoraChipIn 200ms ease-out;
  }
  .seekora-current-refinements[data-variant="pills"]
    .seekora-current-refinements__chip {
    background: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #fff);
  }
  .seekora-current-refinements__chip-remove {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: 1em;
    line-height: 1;
  }
  .seekora-current-refinements__clear-all {
    padding: 4px 8px;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
    background: transparent;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
  }
  .seekora-current-refinements__group {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-xs, 4px);
  }
  .seekora-current-refinements__group-header {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-text-primary, #212529);
    text-transform: capitalize;
  }
  @keyframes seekoraChipIn {
    from {
      opacity: 0;
      transform: scale(0.85);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* ─── MobileFilters drawer + button ─────────────────────────────────────── */

  /* Button: hidden on desktop, visible on mobile only */
  .seekora-mobile-filters-button {
    display: none;
  }

  @media (max-width: 768px) {
    .seekora-mobile-filters-button {
      display: inline-flex;
      align-items: center;
      gap: var(--seekora-spacing-sm, 8px);
      padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
      font-size: var(--seekora-font-size-base, 1rem);
      font-weight: var(--seekora-font-weight-medium, 500);
      color: var(--seekora-text-primary, #212529);
      background: var(--seekora-bg-surface, #fff);
      border: 1px solid var(--seekora-border-color, #dee2e6);
      border-radius: var(--seekora-border-radius, 6px);
      cursor: pointer;
      font-family: inherit;
    }
  }

  .seekora-mobile-filters-button__icon {
    flex-shrink: 0;
  }

  .seekora-mobile-filters-button__label {
    flex-shrink: 0;
  }

  .seekora-mobile-filters-button__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-primary-text, #fff);
    background: var(--seekora-primary, #4d66fe);
    border-radius: var(--seekora-border-radius-full, 9999px);
  }

  /* Backdrop — fixed full-screen overlay */
  .seekora-mobile-filters-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--seekora-z-modal, 10000);
    opacity: 1;
    transition: opacity 300ms ease-in-out;
  }

  /* Drawer — shared base */
  .seekora-mobile-filters-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--seekora-bg-surface, #fff);
    z-index: calc(var(--seekora-z-modal, 10000) + 1);
    transition: transform 300ms ease-in-out;
    width: 80%;
    max-width: 320px;
    right: 0;
    transform: translateX(100%);
  }

  /* Position variants */
  .seekora-mobile-filters-drawer[data-position="left"] {
    left: 0;
    right: auto;
    transform: translateX(-100%);
  }

  .seekora-mobile-filters-drawer[data-position="right"] {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }

  .seekora-mobile-filters-drawer[data-position="bottom"] {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 80vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(100%);
  }

  /* Open state — slide into view via CSS transform */
  .seekora-mobile-filters-drawer[data-open="true"] {
    transform: translate(0, 0);
  }

  /* Header */
  .seekora-mobile-filters-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--seekora-spacing-md, 16px);
    border-bottom: 1px solid var(--seekora-border-color, #dee2e6);
    flex-shrink: 0;
  }

  .seekora-mobile-filters-drawer__title-row {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
  }

  .seekora-mobile-filters-drawer__title {
    margin: 0;
    font-size: var(--seekora-font-size-lg, 1.125rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-mobile-filters-drawer__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-primary-text, #fff);
    background: var(--seekora-primary, #4d66fe);
    border-radius: var(--seekora-border-radius-full, 9999px);
  }

  .seekora-mobile-filters-drawer__close {
    padding: var(--seekora-spacing-sm, 8px);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--seekora-text-primary, #212529);
    font-family: inherit;
  }

  .seekora-mobile-filters-drawer__close:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
    border-radius: var(--seekora-border-radius, 6px);
  }

  /* Body — scrollable content area */
  .seekora-mobile-filters-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--seekora-spacing-md, 16px);
  }

  /* Footer */
  .seekora-mobile-filters-drawer__footer {
    display: flex;
    gap: var(--seekora-spacing-sm, 8px);
    padding: var(--seekora-spacing-md, 16px);
    border-top: 1px solid var(--seekora-border-color, #dee2e6);
    flex-shrink: 0;
  }

  .seekora-mobile-filters-drawer__clear-btn {
    flex: 1;
    padding: var(--seekora-spacing-md, 16px);
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-primary, #212529);
    background: transparent;
    border: 1px solid var(--seekora-border-color, #dee2e6);
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 150ms ease;
  }

  .seekora-mobile-filters-drawer__clear-btn:hover {
    background: var(--seekora-bg-hover, rgba(0, 0, 0, 0.04));
  }

  .seekora-mobile-filters-drawer__apply-btn {
    flex: 2;
    padding: var(--seekora-spacing-md, 16px);
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-primary-text, #fff);
    background: var(--seekora-primary, #4d66fe);
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 150ms ease;
  }

  .seekora-mobile-filters-drawer__apply-btn:hover {
    background: var(--seekora-primary-dark, #3a52d4);
  }

  /* ─── ErrorBoundary fallback ──────────────────────────────────────────── */
  .seekora-error-boundary {
    padding: var(--seekora-spacing-lg, 24px);
    background: var(--seekora-bg-surface, #fff);
    border: 1px solid var(--seekora-error-light, #f5c6cb);
    border-radius: var(--seekora-border-radius, 6px);
    color: var(--seekora-error, #dc3545);
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-md, 12px);
    text-align: center;
  }

  .seekora-error-boundary__message {
    font-size: var(--seekora-font-size-base, 1rem);
  }

  .seekora-error-boundary__retry {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
    border-radius: var(--seekora-border-radius, 6px);
    border: 1px solid var(--seekora-error, #dc3545);
    background: transparent;
    color: var(--seekora-error, #dc3545);
    cursor: pointer;
    align-self: center;
  }

  .seekora-error-boundary__retry:hover {
    background: var(--seekora-error, #dc3545);
    color: var(--seekora-bg-surface, #fff);
  }

  /* ─── RangeSlider ────────────────────────────────────────────────────────── */
  .seekora-range-slider {
    font-family: inherit;
  }

  .seekora-range-slider__label {
    display: block;
    margin-bottom: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-primary, #212529);
  }

  /* Slider track area */
  .seekora-range-slider__track {
    position: relative;
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* Track background bar */
  .seekora-range-slider__track-bg {
    position: absolute;
    width: 100%;
    height: 4px;
    background: var(--seekora-border-color, #dee2e6);
    border-radius: 2px;
  }

  /* Filled portion between min and max thumbs */
  .seekora-range-slider__fill {
    position: absolute;
    height: 4px;
    background: var(--seekora-primary, #4d66fe);
    border-radius: 2px;
  }

  /* Both range inputs overlay the track (min + max thumbs) */
  .seekora-range-slider__thumb {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    pointer-events: none;
    outline: none;
  }

  /* WebKit thumb */
  .seekora-range-slider__thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--seekora-primary, #4d66fe);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 150ms ease, transform 150ms ease;
  }

  .seekora-range-slider__thumb:hover::-webkit-slider-thumb,
  .seekora-range-slider__thumb:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--seekora-primary-alpha, rgba(77, 102, 254, 0.2));
  }

  .seekora-range-slider__thumb:focus-visible::-webkit-slider-thumb {
    transform: scale(1.15);
  }

  /* Firefox thumb */
  .seekora-range-slider__thumb::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--seekora-primary, #4d66fe);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 150ms ease, transform 150ms ease;
  }

  .seekora-range-slider__thumb:hover::-moz-range-thumb,
  .seekora-range-slider__thumb:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--seekora-primary-alpha, rgba(77, 102, 254, 0.2));
  }

  .seekora-range-slider__thumb:focus-visible::-moz-range-thumb {
    transform: scale(1.15);
  }

  /* Values row displayed below the track */
  .seekora-range-slider__values {
    display: flex;
    justify-content: space-between;
    margin-top: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
  }

  /* Text inputs (if used instead of plain spans) */
  .seekora-range-slider__input {
    width: 5em;
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    border: 1px solid var(--seekora-border-color, #dee2e6);
    border-radius: var(--seekora-border-radius, 6px);
    color: var(--seekora-text-primary, #212529);
    background: var(--seekora-bg-surface, #fff);
    font-family: inherit;
    text-align: center;
  }

  .seekora-range-slider__input:focus-visible {
    outline: none;
    border-color: var(--seekora-primary, #4d66fe);
    box-shadow: 0 0 0 2px var(--seekora-primary-alpha, rgba(77, 102, 254, 0.2));
  }

  /* ── size variants ───────────────────────────────────────────────── */

  .seekora-range-slider[data-size="small"] .seekora-range-slider__label {
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-range-slider[data-size="small"] .seekora-range-slider__values {
    font-size: var(--seekora-font-size-xs, 0.75rem);
  }

  .seekora-range-slider[data-size="large"] .seekora-range-slider__label {
    font-size: var(--seekora-font-size-lg, 1.125rem);
  }

  .seekora-range-slider[data-size="large"] .seekora-range-slider__values {
    font-size: var(--seekora-font-size-base, 1rem);
  }

  .seekora-range-slider[data-size="large"]
    .seekora-range-slider__thumb::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
  }

  .seekora-range-slider[data-size="large"]
    .seekora-range-slider__thumb::-moz-range-thumb {
    width: 24px;
    height: 24px;
  }

  /* ─── HierarchicalMenu ──────────────────────────────────────────────────── */
  .seekora-hierarchical-menu {
    --seekora-hmenu-level-indent: var(--seekora-spacing-md, 16px);
    outline: none;
  }

  /* Level list — resets + indent per depth */
  .seekora-hierarchical-menu__level {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Child levels get left-padding proportional to depth via inline --seekora-hmenu-depth var */
  .seekora-hierarchical-menu__level--nested {
    padding-left: calc(
      var(--seekora-hmenu-depth, 1) * var(--seekora-hmenu-level-indent)
    );
  }

  /* Tree item wrapper */
  .seekora-hierarchical-menu__item {
    padding: var(--seekora-spacing-xs, 4px) 0;
  }

  /* Item button */
  .seekora-hierarchical-menu__item-btn {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, #212529);
    font-weight: var(--seekora-font-weight-normal, 400);
    transition: color 150ms ease;
  }

  .seekora-hierarchical-menu__item-btn:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
    border-radius: var(--seekora-border-radius, 6px);
  }

  /* Active (refined) item */
  .seekora-hierarchical-menu__item--active
    > .seekora-hierarchical-menu__item-btn {
    color: var(--seekora-primary, #4d66fe);
    font-weight: var(--seekora-font-weight-semibold, 600);
  }

  /* Item with children (expanded/expandable) */
  .seekora-hierarchical-menu__item--expanded
    > .seekora-hierarchical-menu__item-btn {
    color: var(--seekora-primary, #4d66fe);
  }

  /* Label */
  .seekora-hierarchical-menu__label {
    flex: 1;
  }

  /* Count badge */
  .seekora-hierarchical-menu__count {
    color: var(--seekora-text-secondary, #6c757d);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    flex-shrink: 0;
  }

  /* Caret icon (for items with children) */
  .seekora-hierarchical-menu__caret {
    flex-shrink: 0;
    color: var(--seekora-text-secondary, #6c757d);
    transition: transform 200ms ease;
  }

  .seekora-hierarchical-menu__item--expanded
    > .seekora-hierarchical-menu__item-btn
    .seekora-hierarchical-menu__caret {
    transform: rotate(90deg);
  }

  /* Show more / less button */
  .seekora-hierarchical-menu__show-more {
    padding: var(--seekora-spacing-xs, 4px) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-family: inherit;
    color: var(--seekora-primary, #4d66fe);
    text-decoration: underline;
  }

  /* ── SearchInput (suggestions-primitives) ───────────────────────── */

  .seekora-search-input {
    position: relative;
    width: 100%;
  }

  .seekora-search-input__field {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    border: 1px solid var(--seekora-border-color, rgba(0, 0, 0, 0.1));
    border-radius: var(--seekora-border-radius, 6px);
    background-color: var(--seekora-bg-surface, transparent);
    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
    box-sizing: border-box;
  }

  .seekora-search-input__field:focus-within {
    border-color: var(--seekora-primary, #4d66fe);
    box-shadow: 0 0 0 2px var(--seekora-primary-alpha, rgba(77, 102, 254, 0.2));
  }

  .seekora-search-input__icon {
    display: flex;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.5;
  }

  .seekora-search-input__input {
    flex: 1;
    min-width: 0;
    padding: var(--seekora-spacing-sm, 8px) 0;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: inherit;
    color: var(--seekora-text-primary, inherit);
    font-family: inherit;
  }

  .seekora-search-input__clear {
    padding: var(--seekora-spacing-sm, 8px);
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 150ms ease-in-out;
  }

  .seekora-search-input__clear:hover {
    opacity: 0.8;
  }

  /* ── DropdownPanel (suggestions-primitives) ─────────────────────── */

  .seekora-dropdown-panel {
    overflow: auto;
    background-color: var(--seekora-bg-surface, #fff);
    border: 1px solid var(--seekora-border-color, #e5e7eb);
    border-radius: var(--seekora-border-radius, 6px);
    box-shadow: var(
      --seekora-shadow-lg,
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05)
    );
    margin-top: 4px;
  }

  .seekora-dropdown-panel__inner {
    display: flex;
    flex-direction: column;
  }

  .seekora-dropdown-panel__section {
    padding: var(--seekora-spacing-sm, 8px) 0;
    border-bottom: 1px solid var(--seekora-border-color, #e5e7eb);
  }

  .seekora-dropdown-panel__section:last-child {
    border-bottom: none;
  }

  .seekora-dropdown-panel__section-header {
    padding: var(--seekora-spacing-xs, 4px) var(--seekora-spacing-md, 12px);
    font-size: var(--seekora-font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--seekora-text-secondary, #6c757d);
  }

  /* ─── SearchBar ─────────────────────────────────────────────────────────── */
  .seekora-searchbar {
    --seekora-searchbar-bg: var(--seekora-bg-surface, #fff);
    --seekora-searchbar-border: var(--seekora-border-color, #dee2e6);
    --seekora-searchbar-focus-border: var(--seekora-primary, #4d66fe);
    --seekora-searchbar-radius: var(--seekora-border-radius, 6px);
    --seekora-searchbar-icon-color: var(--seekora-text-secondary, #6c757d);
    --seekora-searchbar-transition: var(
      --seekora-transition-fast,
      150ms ease-in-out
    );
    --seekora-searchbar-padding-v: 0.625rem;
    --seekora-searchbar-font-size: var(--seekora-font-size-base, 1rem);
    --seekora-searchbar-icon-left: 0.625rem;
    --seekora-searchbar-icon-right: 0.625rem;
    --seekora-searchbar-padding-left: 2.25rem;
    position: relative;
    display: flex;
    align-items: center;
  }

  /* ── input wrapper ───────────────────────────────────────────────────────── */

  .seekora-searchbar__input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }

  /* ── search icon ─────────────────────────────────────────────────────────── */

  .seekora-searchbar__icon {
    position: absolute;
    left: var(--seekora-searchbar-icon-left);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--seekora-searchbar-icon-color);
    z-index: 2;
  }

  /* ── input ───────────────────────────────────────────────────────────────── */

  .seekora-searchbar__input {
    width: 100%;
    padding: var(--seekora-searchbar-padding-v) 1rem
      var(--seekora-searchbar-padding-v) var(--seekora-searchbar-padding-left);
    font-size: var(--seekora-searchbar-font-size);
    font-family: inherit;
    background: var(--seekora-searchbar-bg);
    color: var(--seekora-text-primary, #212529);
    border: 1px solid var(--seekora-searchbar-border);
    border-radius: var(--seekora-searchbar-radius);
    outline: none;
    transition: border-color var(--seekora-searchbar-transition),
      box-shadow var(--seekora-searchbar-transition);
    box-sizing: border-box;
  }

  .seekora-searchbar__input:focus,
  .seekora-searchbar[data-focused] .seekora-searchbar__input {
    border-color: var(--seekora-searchbar-focus-border);
    box-shadow: 0 0 0 3px
      var(--seekora-border-focus-alpha, rgba(77, 102, 254, 0.2));
  }

  /* When a clear button is present, shrink right padding to make room */
  .seekora-searchbar__input[data-has-clear] {
    padding-right: var(--seekora-searchbar-padding-left);
  }

  /* ── clear button ────────────────────────────────────────────────────────── */

  .seekora-searchbar__clear {
    position: absolute;
    right: var(--seekora-searchbar-icon-right);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    color: var(--seekora-searchbar-icon-color);
    transition: color var(--seekora-searchbar-transition),
      background-color var(--seekora-searchbar-transition);
    z-index: 2;
  }

  .seekora-searchbar__clear:hover {
    color: var(--seekora-text-primary, #212529);
    background: var(--seekora-bg-hover, rgba(0, 0, 0, 0.06));
  }

  /* ── submit button ───────────────────────────────────────────────────────── */

  .seekora-searchbar__submit-wrap {
    margin-left: var(--seekora-spacing-sm, 8px);
    cursor: pointer;
  }

  .seekora-searchbar__submit {
    margin-left: var(--seekora-spacing-sm, 8px);
    padding: var(--seekora-searchbar-padding-v) 1rem;
    font-size: var(--seekora-searchbar-font-size);
    font-family: inherit;
    font-weight: var(--seekora-font-weight-medium, 500);
    background: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #fff);
    border: none;
    border-radius: var(--seekora-searchbar-radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--seekora-searchbar-transition);
  }

  .seekora-searchbar__submit:hover {
    background: var(--seekora-primary-dark, #3a52d4);
  }

  /* ── processing time ─────────────────────────────────────────────────────── */

  .seekora-searchbar__timing {
    margin-left: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, #212529);
    opacity: 0.7;
    white-space: nowrap;
  }

  /* ── suggestions panel ───────────────────────────────────────────────────── */

  .seekora-searchbar__suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--seekora-spacing-xs, 4px);
    background: var(--seekora-searchbar-bg);
    border: 1px solid var(--seekora-searchbar-border);
    border-radius: var(--seekora-searchbar-radius);
    box-shadow: var(--seekora-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    max-height: 400px;
    overflow-y: auto;
    z-index: var(--seekora-z-dropdown, 9999);
    box-sizing: border-box;
  }

  /* ── suggestion item ─────────────────────────────────────────────────────── */

  .seekora-searchbar__suggestion-item {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
    cursor: pointer;
    color: var(--seekora-text-primary, #212529);
    background: transparent;
    transition: background-color var(--seekora-searchbar-transition);
  }

  .seekora-searchbar__suggestion-item:hover,
  .seekora-searchbar__suggestion-item--active {
    background: var(--seekora-bg-hover, rgba(0, 0, 0, 0.04));
  }

  .seekora-searchbar__suggestion-empty {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
    text-align: center;
    color: var(--seekora-text-secondary, #6c757d);
  }

  /* ── size variants ───────────────────────────────────────────────────────── */

  .seekora-searchbar[data-size="small"] {
    --seekora-searchbar-padding-v: 0.375rem;
    --seekora-searchbar-font-size: var(--seekora-font-size-sm, 0.875rem);
    --seekora-searchbar-icon-left: 0.5rem;
    --seekora-searchbar-icon-right: 0.5rem;
    --seekora-searchbar-padding-left: 1.75rem;
  }

  .seekora-searchbar[data-size="large"] {
    --seekora-searchbar-padding-v: 0.875rem;
    --seekora-searchbar-font-size: var(--seekora-font-size-lg, 1.125rem);
    --seekora-searchbar-icon-left: 0.75rem;
    --seekora-searchbar-icon-right: 0.75rem;
    --seekora-searchbar-padding-left: 2.75rem;
  }

  /* ============================================================================
 * ProductCard layouts  — SCRUM-268
 *
 * Five layout variants encoded via `data-layout` on `.seekora-product-card`.
 * All responsive sizing (mobile vs desktop) is handled in CSS via custom-property
 * overrides rather than in JS. The `useIsMobile` / `useResponsiveGap` hooks are
 * removed from the layouts; their former values become the default fallback tokens.
 * ============================================================================ */

  /* ── shared image placeholder ───────────────────────────────────────────── */
  .seekora-suggestions-product-card-placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--seekora-border-radius, 4px);
    background-color: var(--seekora-bg-secondary, rgba(0, 0, 0, 0.04));
  }

  /* ── shared image-wrap inside ImageBlock ────────────────────────────────── */
  .seekora-product-card__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--seekora-border-radius, 4px);
  }

  /* ── shared body ────────────────────────────────────────────────────────── */
  .seekora-product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-product-card-body-gap, 4px);
  }

  /* ── shared title ───────────────────────────────────────────────────────── */
  .seekora-product-card__title {
    font-size: var(
      --seekora-product-card-title-font-size,
      var(--seekora-font-size-sm, 0.875rem)
    );
    font-weight: var(--seekora-font-weight-medium, 500);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── shared price ───────────────────────────────────────────────────────── */
  .seekora-product-card__price {
    font-size: var(
      --seekora-product-card-price-font-size,
      var(--seekora-font-size-sm, 0.875rem)
    );
    color: inherit;
    opacity: 0.6;
  }

  /* ── shared brand ───────────────────────────────────────────────────────── */
  .seekora-product-card__brand {
    font-size: var(
      --seekora-product-card-brand-font-size,
      var(--seekora-font-size-xs, 0.75rem)
    );
    color: inherit;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* ── shared stock ───────────────────────────────────────────────────────── */
  .seekora-product-card__stock--in {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-success, #22c55e);
  }

  .seekora-product-card__stock--out {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-error, #ef4444);
  }

  /* ============================================================================
 * minimal — image, title, price
 * ============================================================================ */

  .seekora-product-card[data-layout="minimal"] .seekora-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ============================================================================
 * standard — image, badges, brand, title, price, color swatches
 * ============================================================================ */

  .seekora-product-card[data-layout="standard"]
    .seekora-product-card__image-wrap {
    position: relative;
  }

  .seekora-product-card[data-layout="standard"] .seekora-product-card__body {
    gap: var(--seekora-product-card-body-gap, 4px);
  }

  .seekora-product-card[data-layout="standard"] .seekora-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ============================================================================
 * detailed — image, badges, brand, title, price + discount, rating, stock
 * ============================================================================ */

  .seekora-product-card[data-layout="detailed"]
    .seekora-product-card__image-wrap {
    position: relative;
  }

  .seekora-product-card[data-layout="detailed"] .seekora-product-card__body {
    gap: var(--seekora-product-card-body-gap, 4px);
  }

  /* detailed title is single-line clamp — no -webkit-box override, just ellipsis */
  .seekora-product-card[data-layout="detailed"] .seekora-product-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ============================================================================
 * compact — small image, 1-line title, price
 * ============================================================================ */

  .seekora-product-card[data-layout="compact"] .seekora-product-card__title {
    font-size: var(--seekora-product-card-compact-font-size, 0.8125rem);
    white-space: nowrap;
  }

  .seekora-product-card[data-layout="compact"] .seekora-product-card__price {
    font-size: var(--seekora-product-card-compact-font-size, 0.8125rem);
  }

  /* ============================================================================
 * horizontal — image left + content right
 * ============================================================================ */

  .seekora-product-card[data-layout="horizontal"] {
    display: flex;
    gap: var(--seekora-product-card-h-gap, 12px);
    align-items: flex-start;
  }

  .seekora-product-card[data-layout="horizontal"]
    .seekora-product-card__image-wrap {
    position: relative;
    min-width: var(--seekora-product-card-h-img-min, 80px);
    flex-basis: var(--seekora-product-card-h-img-basis, 25%);
    max-width: var(--seekora-product-card-h-img-max, 120px);
    flex-shrink: 0;
  }

  .seekora-product-card[data-layout="horizontal"] .seekora-product-card__body {
    flex: 1;
    min-width: 0;
    gap: var(--seekora-product-card-body-gap, 4px);
  }

  .seekora-product-card[data-layout="horizontal"] .seekora-product-card__title {
    display: -webkit-box;
    -webkit-line-clamp: var(--seekora-product-card-h-title-clamp, 2);
    -webkit-box-orient: vertical;
  }

  /* ── mobile overrides for horizontal layout ─────────────────────────────── */
  @media (max-width: 640px) {
    .seekora-product-card[data-layout="horizontal"] {
      --seekora-product-card-h-gap: 8px;
      --seekora-product-card-h-img-min: 60px;
      --seekora-product-card-h-img-basis: 20%;
      --seekora-product-card-h-img-max: 100px;
      --seekora-product-card-body-gap: 6px;
      --seekora-product-card-h-title-clamp: 3;
    }

    .seekora-product-card[data-layout="minimal"],
    .seekora-product-card[data-layout="standard"] {
      --seekora-product-card-body-gap: 6px;
      --seekora-product-card-title-font-size: 0.9375rem;
      --seekora-product-card-price-font-size: 0.9375rem;
      --seekora-product-card-brand-font-size: 0.8125rem;
    }
  }

  /* ─── Suggestion lists ──────────────────────────────────────────────────── */

  /* TrendingList */
  .seekora-trending-list {
    /* no layout constraints — host positions the container */
  }

  .seekora-trending-list__item {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
    padding: var(--seekora-spacing-sm, 10px) var(--seekora-spacing-md, 12px);
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    background-color: transparent;
    color: inherit;
    transition: background-color 120ms ease;
  }

  .seekora-trending-list__item:hover {
    background-color: var(--seekora-bg-hover, rgba(0, 0, 0, 0.05));
  }

  .seekora-trending-list__icon {
    margin-left: var(--seekora-spacing-sm, 8px);
    color: inherit;
    opacity: 0.6;
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  /* RecentSearchesList */
  .seekora-recent-searches {
    /* no layout constraints — host positions the container */
  }

  .seekora-recent-searches__item {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
    padding: var(--seekora-spacing-sm, 10px) var(--seekora-spacing-md, 12px);
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    background-color: transparent;
    color: inherit;
    transition: background-color 120ms ease;
  }

  .seekora-recent-searches__item:hover {
    background-color: var(--seekora-bg-hover, rgba(0, 0, 0, 0.05));
  }

  .seekora-recent-searches__clear {
    margin-left: auto;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--seekora-text-secondary, #6c757d);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-family: inherit;
    padding: 0;
    line-height: 1;
  }

  /* CategoriesTabs */
  .seekora-categories-tabs {
    display: flex;
    gap: var(--seekora-spacing-xs, 4px);
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    border-bottom: 1px solid var(--seekora-border-color, #e5e7eb);
    overflow-x: auto;
  }

  .seekora-categories-tabs__tab {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 12px);
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-normal, 400);
    white-space: nowrap;
    font-family: inherit;
    transition: background-color 120ms ease;
  }

  .seekora-categories-tabs__tab--active {
    background-color: var(--seekora-primary-alpha, rgba(59, 130, 246, 0.1));
    color: var(--seekora-primary, #4d66fe);
    font-weight: var(--seekora-font-weight-semibold, 600);
  }

  /* ─── HitsPerPage ───────────────────────────────────────────────────────── */
  .seekora-hits-per-page {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
  }

  .seekora-hits-per-page__label {
    font-size: var(--seekora-font-size-base, 1rem);
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-hits-per-page__select {
    /* inherits CustomSelect styles; scoped overrides go here */
  }

  /* ─── Suggestion dropdown variants (Amazon/Google/Pinterest/Spotlight/Shopify/MobileSheet/Minimal) ── */

  /* Shared base — all dropdown variants */
  .seekora-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background-color: var(--seekora-bg-surface, #ffffff);
    color: var(--seekora-text-primary, #111111);
    overflow: hidden;
    font-family: var(
      --seekora-font-family,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif
    );
    font-size: var(--seekora-font-size-sm, 14px);
    z-index: 1000;
  }

  /* ── Amazon variant ── */
  .seekora-dropdown--amazon {
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 10px 40px -5px rgba(0, 0, 0, 0.15);
  }

  .seekora-dropdown--amazon .seekora-dropdown__tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--seekora-border-color, #e7e7e7);
    background: var(--seekora-bg-secondary, #f5f5f5);
    -webkit-overflow-scrolling: touch;
  }

  .seekora-dropdown--amazon .seekora-dropdown__tab-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
    transition: all 150ms ease;
    background: var(--seekora-bg-surface, #ffffff);
    color: var(--seekora-text-primary, #0f1111);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .seekora-dropdown--amazon .seekora-dropdown__tab-btn--all-active {
    background: var(--seekora-text-primary, #232f3e);
    color: var(--seekora-bg-surface, #ffffff);
    font-weight: 600;
    box-shadow: none;
  }

  .seekora-dropdown--amazon .seekora-dropdown__tab-btn--category-active {
    background: var(--seekora-primary, #ff9900);
    color: var(--seekora-text-on-primary, #0f1111);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(255, 153, 0, 0.3);
  }

  .seekora-dropdown--amazon .seekora-dropdown__product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px 16px 16px;
  }

  .seekora-dropdown--amazon .seekora-dropdown__placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--seekora-text-tertiary, #999);
    font-size: 32px;
  }

  /* ── Pinterest variant ── */
  .seekora-dropdown--pinterest {
    border-radius: 20px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
  }

  .seekora-dropdown--pinterest .seekora-dropdown__content {
    padding: 16px;
    overflow-y: auto;
  }

  .seekora-dropdown--pinterest .seekora-dropdown__product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }

  .seekora-dropdown--pinterest .seekora-dropdown__footer-count {
    color: var(--seekora-text-secondary, #767676);
    font-size: 14px;
  }

  /* ── Spotlight variant ── */
  .seekora-dropdown--spotlight {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .seekora-dropdown--spotlight .seekora-dropdown__panel {
    background-color: var(--seekora-bg-surface, rgba(255, 255, 255, 0.95));
    border-radius: var(--seekora-border-radius, 12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    backdrop-filter: blur(20px);
  }

  .seekora-dropdown--spotlight .seekora-dropdown__overlay-content {
    display: flex;
    max-height: 400px;
  }

  .seekora-dropdown--spotlight .seekora-dropdown__results-col {
    flex: 1;
    overflow-y: auto;
    min-width: 300px;
  }

  .seekora-dropdown--spotlight .seekora-dropdown__preview-col {
    width: 280px;
    border-left: 1px solid var(--seekora-border-color, rgba(0, 0, 0, 0.1));
    background-color: var(--seekora-bg-secondary, rgba(0, 0, 0, 0.02));
    display: flex;
    flex-direction: column;
  }

  /* ── MobileSheet variant ── */
  .seekora-dropdown--mobile-sheet {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    background-color: var(--seekora-bg-surface, #ffffff);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
  }

  .seekora-dropdown--mobile-sheet .seekora-dropdown__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
  }

  .seekora-dropdown--mobile-sheet .seekora-dropdown__products-scroll {
    display: flex;
    gap: 12px;
    padding: 0 16px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .seekora-dropdown--mobile-sheet .seekora-dropdown__footer {
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
  }

  /* ── Shopify variant ── */
  .seekora-dropdown--shopify {
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
  }

  .seekora-dropdown--shopify .seekora-dropdown__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    flex: 1;
    overflow-y: auto;
  }

  .seekora-dropdown--shopify .seekora-dropdown__collections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    border-top: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
  }

  .seekora-dropdown--shopify .seekora-dropdown__products-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    gap: 16px;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .seekora-dropdown--shopify .seekora-dropdown__more-products-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--seekora-text-secondary, #666);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
  }

  /* ── Google variant ── */
  .seekora-dropdown--google {
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
  }

  .seekora-dropdown--google .seekora-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 8px;
    flex: 1;
    overflow-y: auto;
  }

  .seekora-dropdown--google .seekora-dropdown__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid var(--seekora-border-color, #e8eaed);
    gap: 24px;
    background-color: var(--seekora-bg-secondary, #f8f9fa);
  }

  /* ── Minimal variant ── */
  .seekora-dropdown--minimal {
    margin-top: 4px;
    background-color: var(--seekora-bg-surface, #ffffff);
    border: 1px solid var(--seekora-border-color, #e5e5e5);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--seekora-font-family, "Inter", -apple-system, sans-serif);
    letter-spacing: -0.01em;
  }

  .seekora-dropdown--minimal .seekora-dropdown__list-wrapper {
    overflow-y: auto;
  }

  .seekora-dropdown--minimal .seekora-dropdown__footer {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--seekora-bg-secondary, #fafafa);
    font-size: 12px;
    color: var(--seekora-text-tertiary, #999);
    border-top: 1px solid var(--seekora-border-color, #e5e5e5);
  }

  /* ─── Recommendations ───────────────────────────────────────────────────── */

  .seekora-recommendations {
    --seekora-rec-gap: var(--seekora-spacing-md, 16px);
    --seekora-rec-item-width-carousel: 150px;
    --seekora-rec-img-height-carousel: 120px;
    --seekora-rec-img-size-list: 60px;
  }

  /* ── header + title ─────────────────────────────────────────────────────── */

  .seekora-recommendations__header {
    margin-bottom: var(--seekora-rec-gap);
  }

  .seekora-recommendations__title {
    margin: 0;
    font-size: var(--seekora-font-size-lg, 1.125rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-recommendations__subtitle {
    margin: var(--seekora-spacing-xs, 4px) 0 0;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
  }

  /* ── grid (default — carousel/horizontal) ──────────────────────────────── */

  .seekora-recommendations__grid {
    display: flex;
    gap: var(--seekora-rec-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--seekora-spacing-sm, 8px);
  }

  /* ── grid layout variants via data-layout ──────────────────────────────── */

  .seekora-recommendations[data-layout="grid"] .seekora-recommendations__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .seekora-recommendations[data-layout="list"] .seekora-recommendations__grid {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    gap: var(--seekora-spacing-sm, 8px);
  }

  /* ── item ───────────────────────────────────────────────────────────────── */

  .seekora-recommendations__item {
    flex-shrink: 0;
    width: var(--seekora-rec-item-width-carousel);
    scroll-snap-align: start;
    cursor: default;
  }

  .seekora-recommendations__item--clickable {
    cursor: pointer;
  }

  .seekora-recommendations[data-layout="grid"] .seekora-recommendations__item {
    flex-shrink: unset;
    width: auto;
    scroll-snap-align: none;
  }

  .seekora-recommendations[data-layout="list"] .seekora-recommendations__item {
    flex-shrink: unset;
    width: auto;
    scroll-snap-align: none;
    display: flex;
    gap: var(--seekora-rec-gap);
    padding: var(--seekora-spacing-sm, 8px);
    border-bottom: 1px solid var(--seekora-border-color, #dee2e6);
  }

  /* ── item image ─────────────────────────────────────────────────────────── */

  .seekora-recommendations__item-img {
    width: 100%;
    height: var(--seekora-rec-img-height-carousel);
    object-fit: cover;
    border-radius: var(--seekora-border-radius, 6px);
    display: block;
  }

  .seekora-recommendations__item-img[data-layout="list"] {
    width: var(--seekora-rec-img-size-list);
    height: var(--seekora-rec-img-size-list);
    flex-shrink: 0;
  }

  /* ── item body ──────────────────────────────────────────────────────────── */

  .seekora-recommendations__item-body {
    margin-top: var(--seekora-spacing-sm, 8px);
  }

  .seekora-recommendations[data-layout="list"]
    .seekora-recommendations__item-body {
    flex: 1;
    margin-top: 0;
  }

  /* ── item name ──────────────────────────────────────────────────────────── */

  .seekora-recommendations__item-name {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-primary, #212529);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* ── item price ─────────────────────────────────────────────────────────── */

  .seekora-recommendations__item-price {
    margin-top: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-primary, #4d66fe);
  }

  /* ── CTA (FrequentlyBoughtTogether add-all block) ───────────────────────── */

  .seekora-recommendations__cta {
    margin-left: auto;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
  }

  .seekora-recommendations__cta-total {
    font-size: var(--seekora-font-size-lg, 1.125rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-recommendations__cta-btn {
    padding: var(--seekora-spacing-sm, 8px) var(--seekora-spacing-md, 16px);
    font-size: var(--seekora-font-size-base, 1rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-primary-text, #ffffff);
    background: var(--seekora-primary, #4d66fe);
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    font-family: inherit;
    transition: background-color 150ms ease;
    white-space: nowrap;
  }

  .seekora-recommendations__cta-btn:hover {
    background: var(--seekora-primary-dark, #3a52d4);
  }

  /* ── FBT separator (+) ──────────────────────────────────────────────────── */

  .seekora-recommendations__fbt-sep {
    font-size: 1.5rem;
    color: var(--seekora-text-secondary, #6c757d);
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  /* ── FBT item image + price (inline in FBT grid) ────────────────────────── */

  .seekora-recommendations__fbt-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--seekora-border-radius, 6px);
    border: 1px solid var(--seekora-border-color, #dee2e6);
    display: block;
  }

  .seekora-recommendations__fbt-price {
    margin-top: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, #212529);
    text-align: center;
  }

  /* ── data-model tint variants ───────────────────────────────────────────── */
  /* Accent colour on title only — lightweight signal to merchant CSS */

  .seekora-recommendations[data-model="fbt"] .seekora-recommendations__title,
  .seekora-recommendations[data-model="cross_sell"]
    .seekora-recommendations__title {
    color: var(
      --seekora-rec-fbt-title-color,
      var(--seekora-text-primary, #212529)
    );
  }

  .seekora-recommendations[data-model="trending"]
    .seekora-recommendations__title,
  .seekora-recommendations[data-model="bestsellers"]
    .seekora-recommendations__title {
    color: var(
      --seekora-rec-trending-title-color,
      var(--seekora-text-primary, #212529)
    );
  }

  .seekora-recommendations[data-model="visual_similar"]
    .seekora-recommendations__title,
  .seekora-recommendations[data-model="related"]
    .seekora-recommendations__title {
    color: var(
      --seekora-rec-related-title-color,
      var(--seekora-text-primary, #212529)
    );
  }

  .seekora-recommendations[data-model="personalized"]
    .seekora-recommendations__title {
    color: var(
      --seekora-rec-personalized-title-color,
      var(--seekora-text-primary, #212529)
    );
  }

  /* ─── FederatedDropdown ─────────────────────────────────────────────────── */

  .seekora-federated-dropdown {
    background-color: var(--seekora-bg-surface, transparent);
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    border-radius: var(--seekora-border-radius-lg, 12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  /* ── header ─────────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__header {
    padding: 12px 20px;
    border-bottom: 1px solid
      var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
  }

  /* ── tabs ────────────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__tabs {
    display: flex;
    gap: var(--seekora-spacing-xs, 4px);
    padding: 12px 20px;
    border-bottom: 1px solid
      var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    overflow-x: auto;
  }

  .seekora-federated-dropdown__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-secondary, inherit);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--seekora-border-radius-full, 9999px);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all 150ms ease-in-out;
  }

  .seekora-federated-dropdown__tab--active {
    color: var(--seekora-primary, #4d66fe);
    background-color: var(
      --seekora-primary-light,
      var(--seekora-primary-alpha, rgba(77, 102, 254, 0.1))
    );
    border-color: var(--seekora-primary, #4d66fe);
  }

  .seekora-federated-dropdown__tab:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
  }

  .seekora-federated-dropdown__tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--seekora-font-weight-semibold, 600);
    padding: 2px 6px;
    border-radius: var(--seekora-border-radius, 6px);
    background-color: var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1));
  }

  .seekora-federated-dropdown__tab-count--active {
    background-color: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #fff);
  }

  /* ── main content ────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__content {
    display: flex;
    overflow-y: auto;
  }

  .seekora-federated-dropdown--stacked .seekora-federated-dropdown__content {
    flex-direction: column;
  }

  /* ── suggestions column ──────────────────────────────────────────────────── */

  .seekora-federated-dropdown__suggestions-column {
    border-right: 1px solid
      var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    overflow-y: auto;
  }

  .seekora-federated-dropdown--stacked
    .seekora-federated-dropdown__suggestions-column,
  .seekora-federated-dropdown__suggestions-column--full {
    width: 100% !important;
    border-right: none;
  }

  /* ── products column ─────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__products-column {
    flex: 1;
    overflow-y: auto;
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
  }

  /* ── section ─────────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__section {
    padding: 12px 0;
  }

  .seekora-federated-dropdown__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 8px;
  }

  .seekora-federated-dropdown__section-title {
    font-size: 11px;
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-text-tertiary, var(--seekora-text-secondary, #9ca3af));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
  }

  /* ── view-all link / button ──────────────────────────────────────────────── */

  .seekora-federated-dropdown__view-all {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-primary, #4d66fe);
    text-decoration: none;
    font-weight: var(--seekora-font-weight-semibold, 600);
    cursor: pointer;
  }

  .seekora-federated-dropdown__view-all--btn {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
  }

  .seekora-federated-dropdown__view-all:hover {
    text-decoration: underline;
  }

  /* ── suggestion / recent-search item ────────────────────────────────────── */

  .seekora-federated-dropdown__item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    gap: 12px;
    transition: background-color 150ms ease-in-out;
  }

  .seekora-federated-dropdown__item:hover,
  .seekora-federated-dropdown__item--active {
    background-color: var(--seekora-bg-hover, #f3f4f6);
  }

  .seekora-federated-dropdown__item:hover
    .seekora-federated-dropdown__suggestion-arrow,
  .seekora-federated-dropdown__item--active
    .seekora-federated-dropdown__suggestion-arrow {
    opacity: 1;
  }

  .seekora-federated-dropdown__item-text {
    flex: 1;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, inherit);
    font-weight: var(--seekora-font-weight-medium, 500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seekora-federated-dropdown__item-count {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-text-tertiary, var(--seekora-text-secondary, #9ca3af));
  }

  /* ── icons ───────────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__suggestion-icon {
    width: 16px;
    height: 16px;
    color: var(--seekora-text-secondary, #6b7280);
    flex-shrink: 0;
  }

  .seekora-federated-dropdown__suggestion-arrow {
    width: 16px;
    height: 16px;
    color: var(--seekora-text-tertiary, #d1d5db);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 100ms ease;
  }

  .seekora-federated-dropdown__suggestion-arrow--visible {
    opacity: 1;
  }

  .seekora-federated-dropdown__trending-icon {
    width: 14px;
    height: 14px;
    color: #10b981;
    flex-shrink: 0;
  }

  /* ── brands ──────────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__brands-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-sm, 8px);
    padding: 8px 20px 16px;
  }

  .seekora-federated-dropdown__brand-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 8px);
    padding: 8px 14px;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-primary, inherit);
    background-color: var(--seekora-bg-surface, transparent);
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    font-family: inherit;
    transition: all 150ms ease-in-out;
  }

  .seekora-federated-dropdown__brand-chip:hover {
    border-color: var(--seekora-primary, #4d66fe);
    background-color: var(
      --seekora-primary-light,
      var(--seekora-primary-alpha, rgba(77, 102, 254, 0.1))
    );
  }

  .seekora-federated-dropdown__brand-logo {
    width: 20px;
    height: 20px;
    border-radius: var(--seekora-border-radius, 6px);
    object-fit: contain;
    background-color: var(--seekora-bg-secondary, #f3f4f6);
    flex-shrink: 0;
  }

  /* ── products grid ───────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    padding: 16px 20px;
  }

  .seekora-federated-dropdown__product-card {
    display: flex;
    flex-direction: column;
    background-color: var(--seekora-bg-surface, transparent);
    border-radius: var(--seekora-border-radius, 6px);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out;
  }

  .seekora-federated-dropdown__product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .seekora-federated-dropdown__product-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: var(--seekora-bg-secondary, #f3f4f6);
  }

  .seekora-federated-dropdown__product-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .seekora-federated-dropdown__product-image-placeholder {
    width: 40%;
    height: 40%;
    color: var(--seekora-text-tertiary, #d1d5db);
  }

  .seekora-federated-dropdown__product-info {
    padding: 10px;
  }

  .seekora-federated-dropdown__product-title {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-primary, inherit);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
  }

  .seekora-federated-dropdown__product-price {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    color: var(--seekora-primary, #4d66fe);
    margin: 4px 0 0;
  }

  /* ── footer ──────────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__footer {
    padding: 12px 20px;
    border-top: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-text-secondary, inherit);
  }

  /* ── highlight (query match) ─────────────────────────────────────────────── */

  .seekora-federated-dropdown__highlight {
    background-color: var(--seekora-highlight-bg, #fef9c3);
    font-weight: var(--seekora-font-weight-semibold, 600);
    padding: 0 2px;
    border-radius: 2px;
  }

  /* ── empty state ─────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__empty {
    padding: 48px 20px;
    text-align: center;
    color: var(--seekora-text-secondary, inherit);
  }

  /* ── focus states ────────────────────────────────────────────────────────── */

  .seekora-federated-dropdown__item:focus-visible {
    outline: 2px solid var(--seekora-primary, #4d66fe);
    outline-offset: -2px;
  }

  /* ── data-variant hooks (reserved for consumers) ─────────────────────────── */

  .seekora-federated-dropdown[data-variant="compact"]
    .seekora-federated-dropdown__item {
    padding: 7px 16px;
  }

  .seekora-federated-dropdown[data-variant="compact"]
    .seekora-federated-dropdown__tabs {
    padding: 8px 16px;
  }

  .seekora-federated-dropdown[data-variant="compact"]
    .seekora-federated-dropdown__products-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding: 10px 16px;
  }

  /* ─── Query suggestions composers ──────────────────────────────────────── */

  /* ── QuerySuggestions (basic list) ─────────────────────────────────────── */

  .seekora-query-suggestions {
    font-size: var(--seekora-font-size-base, 1rem);
    color: var(--seekora-text-primary, inherit);
  }

  .seekora-query-suggestions__title {
    font-size: var(--seekora-font-size-lg, 1.125rem);
    font-weight: var(--seekora-font-weight-bold, 700);
    margin-bottom: var(--seekora-spacing-md, 12px);
    color: var(--seekora-text-primary, inherit);
  }

  .seekora-query-suggestions__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .seekora-query-suggestions__item {
    padding: var(--seekora-spacing-md, 12px);
    cursor: pointer;
    border-radius: var(--seekora-border-radius, 6px);
    transition: background-color 200ms ease;
    background-color: transparent;
    margin-bottom: var(--seekora-spacing-xs, 4px);
  }

  .seekora-query-suggestions__item--active,
  .seekora-query-suggestions__item:hover {
    background-color: var(--seekora-bg-hover, rgba(0, 0, 0, 0.05));
  }

  .seekora-query-suggestions__item-count {
    opacity: 0.6;
    margin-left: var(--seekora-spacing-sm, 8px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-query-suggestions__empty {
    padding: var(--seekora-spacing-md, 12px);
    text-align: center;
    color: var(--seekora-text-secondary, inherit);
    opacity: 0.6;
  }

  /* ── QuerySuggestionsDropdown (positioned dropdown wrap) ────────────────── */

  .seekora-query-suggestions-dropdown {
    background-color: var(--seekora-bg-surface, transparent);
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    border-radius: var(--seekora-border-radius, 8px);
    box-shadow: var(
      --seekora-shadow-lg,
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05)
    );
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .seekora-query-suggestions-dropdown__section {
    padding: 8px 0;
  }

  .seekora-query-suggestions-dropdown__section-title {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-text-secondary, inherit);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 16px 4px;
    margin: 0;
  }

  .seekora-query-suggestions-dropdown__item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    cursor: pointer;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, inherit);
    transition: background-color 150ms ease-in-out;
  }

  .seekora-query-suggestions-dropdown__item--active,
  .seekora-query-suggestions-dropdown__item:hover {
    background-color: var(--seekora-bg-hover, #f3f4f6);
  }

  .seekora-query-suggestions-dropdown__item-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .seekora-query-suggestions-dropdown__icon {
    width: 16px;
    height: 16px;
    color: var(--seekora-text-secondary, #9ca3af);
    flex-shrink: 0;
  }

  .seekora-query-suggestions-dropdown__query {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seekora-query-suggestions-dropdown__count {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-text-secondary, #9ca3af);
    margin-left: auto;
    flex-shrink: 0;
  }

  .seekora-query-suggestions-dropdown__highlight {
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-text-primary, inherit);
    background-color: var(--seekora-highlight-bg, #fef3c7);
    padding: 0 2px;
    border-radius: 2px;
  }

  .seekora-query-suggestions-dropdown__remove {
    padding: 4px;
    border-radius: var(--seekora-border-radius, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--seekora-text-secondary, #9ca3af);
    opacity: 0;
    transition: opacity 150ms ease-in-out, color 150ms ease-in-out;
    font-family: inherit;
  }

  .seekora-query-suggestions-dropdown__remove--visible,
  .seekora-query-suggestions-dropdown__item--active
    .seekora-query-suggestions-dropdown__remove,
  .seekora-query-suggestions-dropdown__item:hover
    .seekora-query-suggestions-dropdown__remove {
    opacity: 1;
  }

  .seekora-query-suggestions-dropdown__divider {
    height: 1px;
    background-color: var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    margin: 4px 0;
  }

  .seekora-query-suggestions-dropdown__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    color: var(--seekora-text-secondary, inherit);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    text-align: center;
  }

  .seekora-query-suggestions-dropdown__empty-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
  }

  .seekora-query-suggestions-dropdown__footer {
    border-top: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    padding: 8px 16px;
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-text-secondary, inherit);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .seekora-query-suggestions-dropdown__keyboard-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
  }

  .seekora-query-suggestions-dropdown__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    font-size: 10px;
    font-weight: var(--seekora-font-weight-medium, 500);
  }

  /* ── RichQuerySuggestions (rich card layout) ────────────────────────────── */

  .seekora-rich-query-suggestions {
    background-color: var(--seekora-bg-surface, transparent);
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    border-radius: var(--seekora-border-radius-lg, 12px);
    box-shadow: var(
      --seekora-shadow-xl,
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04)
    );
    overflow: hidden;
  }

  .seekora-rich-query-suggestions__header {
    padding: 12px 16px;
    border-bottom: 1px solid
      var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
  }

  .seekora-rich-query-suggestions__content {
    overflow-y: auto;
    overflow-x: hidden;
  }

  .seekora-rich-query-suggestions__footer {
    padding: 12px 16px;
    border-top: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-text-secondary, inherit);
  }

  .seekora-rich-query-suggestions__section {
    padding: 8px 0;
  }

  .seekora-rich-query-suggestions__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 4px;
  }

  .seekora-rich-query-suggestions__section-title {
    font-size: 11px;
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-text-tertiary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
  }

  .seekora-rich-query-suggestions__section-action {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-primary, #4d66fe);
    cursor: pointer;
    text-decoration: none;
    font-weight: var(--seekora-font-weight-medium, 500);
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
  }

  .seekora-rich-query-suggestions__item {
    display: flex;
    align-items: flex-start;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 150ms ease-in-out;
    gap: 12px;
  }

  .seekora-rich-query-suggestions__item--active,
  .seekora-rich-query-suggestions__item:hover {
    background-color: var(--seekora-bg-hover, #f3f4f6);
  }

  .seekora-rich-query-suggestions__item:hover
    .seekora-rich-query-suggestions__remove {
    opacity: 1;
  }

  .seekora-rich-query-suggestions__item-icon {
    width: 18px;
    height: 18px;
    color: var(--seekora-text-secondary, #6b7280);
    flex-shrink: 0;
    margin-top: 2px;
  }

  .seekora-rich-query-suggestions__item-content {
    flex: 1;
    min-width: 0;
  }

  .seekora-rich-query-suggestions__item-query {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-primary, inherit);
    font-weight: var(--seekora-font-weight-medium, 500);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seekora-rich-query-suggestions__item-count {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    color: var(--seekora-text-tertiary, #9ca3af);
    flex-shrink: 0;
  }

  .seekora-rich-query-suggestions__remove {
    padding: 4px;
    margin-left: auto;
    border-radius: var(--seekora-border-radius, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--seekora-text-tertiary, #9ca3af);
    opacity: 0;
    transition: opacity 150ms ease-in-out;
    font-family: inherit;
  }

  .seekora-rich-query-suggestions__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .seekora-rich-query-suggestions__category-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-secondary, inherit);
    background-color: var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1));
    border-radius: var(--seekora-border-radius-full, 9999px);
    cursor: pointer;
    transition: all 150ms ease-in-out;
  }

  .seekora-rich-query-suggestions__category-pill--hover,
  .seekora-rich-query-suggestions__category-pill:hover {
    background-color: var(--seekora-primary-light, #dbeafe);
    color: var(--seekora-primary, #4d66fe);
  }

  .seekora-rich-query-suggestions__category-count {
    color: var(--seekora-text-tertiary, #9ca3af);
  }

  .seekora-rich-query-suggestions__trending-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px;
  }

  .seekora-rich-query-suggestions__trending-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-medium, 500);
    color: var(--seekora-text-primary, inherit);
    background-color: var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1));
    border: 1px solid var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    border-radius: var(--seekora-border-radius-full, 9999px);
    cursor: pointer;
    transition: all 150ms ease-in-out;
    font-family: inherit;
  }

  .seekora-rich-query-suggestions__trending-chip--active,
  .seekora-rich-query-suggestions__trending-chip:hover {
    border-color: var(--seekora-primary, #4d66fe);
    background-color: var(--seekora-primary-light, #eff6ff);
  }

  .seekora-rich-query-suggestions__trending-icon {
    width: 14px;
    height: 14px;
    color: var(--seekora-success, #10b981);
  }

  .seekora-rich-query-suggestions__trending-rank {
    width: 18px;
    height: 18px;
    border-radius: var(--seekora-border-radius-full, 9999px);
    background-color: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #fff);
    font-size: 10px;
    font-weight: var(--seekora-font-weight-semibold, 600);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .seekora-rich-query-suggestions__highlight {
    background-color: var(--seekora-highlight-bg, #fef9c3);
    font-weight: var(--seekora-font-weight-semibold, 600);
    border-radius: 2px;
    padding: 0 1px;
  }

  .seekora-rich-query-suggestions__divider {
    height: 1px;
    background-color: var(--seekora-border-color, rgba(128, 128, 128, 0.2));
    margin: 4px 16px;
  }

  .seekora-rich-query-suggestions__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--seekora-text-secondary, inherit);
  }

  .seekora-rich-query-suggestions__arrow-icon {
    width: 16px;
    height: 16px;
  }

  .seekora-rich-query-suggestions__close-icon {
    width: 14px;
    height: 14px;
  }

  /* ── SearchBarWithSuggestions (combined search+dropdown wrapper) ─────────── */

  .seekora-search-bar-with-suggestions {
    position: relative;
    width: 100%;
  }

  .seekora-search-bar-with-suggestions__input-wrapper {
    display: flex;
    align-items: center;
    background-color: var(--seekora-bg-surface, #ffffff);
    border: 1px solid var(--seekora-border-color, #e5e7eb);
    border-radius: var(--seekora-border-radius-lg, 8px);
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .seekora-search-bar-with-suggestions__input-wrapper--focused {
    border-color: var(--seekora-border-focus, var(--seekora-primary, #4d66fe));
    box-shadow: 0 0 0 3px
      var(
        --seekora-border-focus-alpha,
        var(--seekora-primary-light, rgba(77, 102, 254, 0.1))
      );
  }

  .seekora-search-bar-with-suggestions__input {
    flex: 1;
    padding: 12px 16px;
    font-size: var(--seekora-font-size-base, 1rem);
    border: none;
    outline: none;
    background-color: transparent;
    color: var(--seekora-text-primary, #111827);
    font-family: inherit;
  }

  .seekora-search-bar-with-suggestions__search-icon {
    width: 20px;
    height: 20px;
    color: var(--seekora-text-secondary, #9ca3af);
    margin-left: 12px;
    flex-shrink: 0;
  }

  .seekora-search-bar-with-suggestions__clear-icon {
    width: 16px;
    height: 16px;
  }

  .seekora-search-bar-with-suggestions__clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: 4px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: var(--seekora-text-secondary, #9ca3af);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    font-family: inherit;
  }

  .seekora-search-bar-with-suggestions__clear-btn:hover {
    background-color: var(--seekora-bg-hover, rgba(0, 0, 0, 0.05));
  }

  .seekora-search-bar-with-suggestions__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    margin: 4px;
    border: none;
    background-color: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary-text, #ffffff);
    border-radius: var(--seekora-border-radius, 6px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    cursor: pointer;
    transition: background-color 150ms ease;
    font-family: inherit;
  }

  .seekora-search-bar-with-suggestions__search-btn:hover {
    background-color: var(--seekora-primary-dark, #3a52d4);
  }

  .seekora-search-bar-with-suggestions__dropdown {
    /* no layout constraints — host positions the container */
  }

  /* ============================================================================
 * ItemCard (suggestions-primitives)
 * Generic item tile — docs, articles, products, any hit with id/title/image.
 * SCRUM-268
 * ============================================================================ */

  .seekora-item-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    background-color: transparent;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
  }

  .seekora-item-card--horizontal {
    flex-direction: row;
  }

  .seekora-item-card--hover,
  .seekora-item-card:hover {
    background-color: var(
      --seekora-card-hover-bg,
      var(--seekora-bg-hover, rgba(0, 0, 0, 0.03))
    );
    box-shadow: var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  }

  .seekora-item-card-placeholder {
    width: 100%;
    aspect-ratio: var(--seekora-card-aspect-ratio, 1);
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--seekora-bg-secondary, rgba(0, 0, 0, 0.04));
    display: block;
    overflow: hidden;
  }

  .seekora-item-card-title {
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .seekora-item-card-description {
    color: inherit;
    opacity: 0.6;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ============================================================================
 * ProductCard — suggestions-primitives variant
 * Scoped to .seekora-suggestions-product-card to avoid collision with
 * ProductCardLayouts which uses .seekora-product-card[data-layout].
 * SCRUM-268
 * ============================================================================ */

  .seekora-suggestions-product-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    cursor: pointer;
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    background-color: transparent;
    text-align: left;
    transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
  }

  .seekora-suggestions-product-card--hover,
  .seekora-suggestions-product-card:hover {
    background-color: var(
      --seekora-card-hover-bg,
      var(--seekora-bg-hover, rgba(0, 0, 0, 0.03))
    );
    box-shadow: var(--seekora-card-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  }

  .seekora-suggestions-product-card-placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    background-color: var(--seekora-bg-secondary, rgba(0, 0, 0, 0.04));
  }

  .seekora-suggestions-product-card-title {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: 500;
  }

  .seekora-suggestions-product-card-price {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: inherit;
    opacity: 0.6;
  }

  /* ============================================================================
 * SuggestionItem (suggestions-primitives)
 * Text-only suggestion row with active/hover highlight.
 * SCRUM-268
 * ============================================================================ */

  .seekora-suggestions-item {
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: inherit;
    font-family: inherit;
    background-color: transparent;
    color: inherit;
    transition: background-color 120ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seekora-suggestions-item--active,
  .seekora-suggestions-item--hover,
  .seekora-suggestions-item:hover {
    background-color: var(--seekora-bg-hover, rgba(0, 0, 0, 0.05));
  }

  .seekora-suggestions-item-count {
    margin-left: 8px;
    color: inherit;
    opacity: 0.6;
    font-size: 0.875em;
  }

  /* ============================================================================
 * FacetDropdown
 * Trigger button + portal panel for single-field facet filtering.
 * SCRUM-268
 * ============================================================================ */

  .facet-dropdown-container {
    position: relative;
  }

  /* Scrollbar styling for the panel (injected via <style> previously) */
  .facet-dropdown-panel {
    --scrollbar-track: transparent;
    --scrollbar-thumb: var(
      --facet-dropdown-scrollbar-thumb,
      var(--seekora-border-color, #dee2e6)
    );
    --scrollbar-thumb-hover: var(
      --facet-dropdown-scrollbar-thumb-hover,
      var(--seekora-text-secondary, #6c757d)
    );
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    position: absolute;
    width: max-content;
    max-width: min(24rem, 90vw);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--facet-dropdown-bg, var(--seekora-bg-surface, #fff));
    border: 1px solid
      var(--facet-dropdown-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(
      --facet-dropdown-panel-radius,
      var(--seekora-border-radius, 0.5rem)
    );
    box-shadow: var(
      --facet-dropdown-shadow,
      var(--seekora-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.12))
    );
    z-index: 150;
    padding: 0.25rem;
  }

  .facet-dropdown-panel::-webkit-scrollbar {
    width: 6px;
  }

  .facet-dropdown-panel::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  .facet-dropdown-panel::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
  }

  .facet-dropdown-panel::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
  }

  .facet-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    font-size: var(--facet-dropdown-font-size, 0.875rem);
    font-weight: var(--facet-dropdown-font-weight, 500);
    color: var(
      --facet-dropdown-text,
      var(--seekora-text-primary, currentColor)
    );
    background-color: var(
      --facet-dropdown-button-bg,
      var(--seekora-bg-surface, transparent)
    );
    border: 1px solid
      var(--facet-dropdown-border, var(--seekora-border-color, #dee2e6));
    border-radius: var(
      --facet-dropdown-button-radius,
      var(--seekora-border-radius, 0.5rem)
    );
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    white-space: nowrap;
    min-width: 8rem;
  }

  .facet-dropdown-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .facet-dropdown-button__label {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .facet-dropdown-button__caret {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .facet-dropdown-button[aria-expanded="true"] .facet-dropdown-button__caret {
    transform: rotate(180deg);
  }

  .facet-dropdown-option {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: var(--facet-dropdown-option-font-size, 0.875rem);
    font-weight: normal;
    color: var(
      --facet-dropdown-option-text,
      var(--seekora-text-primary, currentColor)
    );
    background-color: transparent;
    border: none;
    border-radius: var(
      --facet-dropdown-option-radius,
      var(--seekora-border-radius, 0.25rem)
    );
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .facet-dropdown-option[aria-selected="true"],
  .facet-dropdown-option[data-active="true"] {
    font-weight: var(--facet-dropdown-option-font-weight-active, 500);
    background-color: var(
      --facet-dropdown-option-active-bg,
      var(--seekora-bg-hover, rgba(0, 0, 0, 0.05))
    );
  }

  .facet-dropdown-option__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .facet-dropdown-option__count {
    font-size: var(--facet-dropdown-count-font-size, 0.75rem);
    color: var(
      --facet-dropdown-count-text,
      var(--seekora-text-secondary, currentColor)
    );
    opacity: 0.7;
    margin-left: 0.5rem;
    flex-shrink: 0;
  }

  /* ============================================================================
 * RatingDisplay + StarIcon
 * Star rating widget — stars-only, compact, full, inline variants.
 * SCRUM-268
 * ============================================================================ */

  .seekora-rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .seekora-rating-star--interactive {
    cursor: pointer;
  }

  /* Size variants driven by data-size on the parent .seekora-rating-display */
  .seekora-rating-display[data-size="small"] .seekora-rating-star,
  .seekora-rating-display[data-size="small"] .seekora-rating-star svg {
    width: 14px;
    height: 14px;
  }

  .seekora-rating-display[data-size="medium"] .seekora-rating-star,
  .seekora-rating-display[data-size="medium"] .seekora-rating-star svg {
    width: 18px;
    height: 18px;
  }

  .seekora-rating-display[data-size="large"] .seekora-rating-star,
  .seekora-rating-display[data-size="large"] .seekora-rating-star svg {
    width: 24px;
    height: 24px;
  }

  .seekora-rating-display {
    display: inline-flex;
    align-items: center;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
  }

  .seekora-rating__row {
    display: inline-flex;
    align-items: center;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-rating-display--stars-only .seekora-rating__stars,
  .seekora-rating-display--stars-only {
    gap: 1px;
  }

  .seekora-rating-numeric {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: 500;
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-rating-numeric--primary {
    font-weight: 600;
  }

  .seekora-rating-max {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
  }

  .seekora-rating-review-count {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
  }

  .seekora-rating-review-text {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
  }

  .seekora-rating-display--full {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ============================================================================
 * VariantSelector
 * Full variant selector for product detail pages.
 * SCRUM-268
 * ============================================================================ */

  .seekora-variant-selector {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-md, 12px);
  }

  .seekora-variant-option-group {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-variant-option-label {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    font-weight: 500;
    color: var(--seekora-text-primary, #212529);
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-variant-option-label__selected {
    font-weight: 400;
    color: var(--seekora-text-secondary, #6c757d);
  }

  .seekora-variant-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-variant-dropdown {
    width: 100%;
  }

  .seekora-variant-button {
    padding: 0.375rem 0.75rem;
    font-size: var(--seekora-font-size-sm, 0.875rem);
    border: 1px solid var(--seekora-border-color, #dee2e6);
    border-radius: var(--seekora-border-radius, 6px);
    background-color: var(--seekora-bg-surface, #fff);
    color: var(--seekora-text-primary, #212529);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .seekora-variant-button:hover:not(:disabled) {
    border-color: var(--seekora-primary, #4d66fe);
  }

  .seekora-variant-button--active {
    border-color: var(--seekora-primary, #4d66fe);
    background-color: var(--seekora-primary-alpha, rgba(77, 102, 254, 0.08));
    color: var(--seekora-primary, #4d66fe);
    font-weight: 500;
  }

  .seekora-variant-button--unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .seekora-variant-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    cursor: pointer;
    transition: outline-color 0.15s ease, border-color 0.15s ease;
    background-color: var(--seekora-swatch-bg);
  }

  .seekora-variant-color-swatch:hover:not(:disabled) {
    outline-color: var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
  }

  .seekora-variant-color-swatch.seekora-variant-button--active {
    border-color: var(--seekora-primary, #4d66fe);
    outline-color: var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
  }

  .seekora-variant-color-swatch.seekora-variant-button--unavailable {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ============================================================================
 * VariantSwatches
 * Inline swatch row for product cards (compact view).
 * SCRUM-268
 * ============================================================================ */

  .seekora-variant-swatches {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-xs, 4px);
  }

  .seekora-variant-swatch-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .seekora-variant-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s ease, outline-color 0.15s ease;
  }

  .seekora-variant-swatch--color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    outline: 2px solid transparent;
    background-color: var(--seekora-swatch-bg);
  }

  .seekora-variant-swatch--color:hover {
    outline-color: var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
  }

  .seekora-variant-swatch--color.seekora-variant-swatch--selected {
    outline-color: var(--seekora-primary, #4d66fe);
    outline-offset: 2px;
  }

  .seekora-variant-swatch--text {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    padding: 2px 6px;
    border: 1px solid var(--seekora-border-color, #dee2e6);
    border-radius: var(--seekora-border-radius, 4px);
    background-color: var(--seekora-bg-surface, #fff);
    color: var(--seekora-text-primary, #212529);
  }

  .seekora-variant-swatch--text.seekora-variant-swatch--selected {
    border-color: var(--seekora-primary, #4d66fe);
    color: var(--seekora-primary, #4d66fe);
    background-color: var(--seekora-primary-alpha, rgba(77, 102, 254, 0.08));
  }

  .seekora-variant-swatch--unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
  }

  .seekora-variant-swatch__unavailable-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .seekora-variant-swatch__unavailable-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
  }

  .seekora-variant-swatch--overflow {
    font-size: var(--seekora-font-size-xs, 0.75rem);
    padding: 2px 6px;
    border: none;
    background: transparent;
    color: var(--seekora-text-secondary, #6c757d);
    cursor: pointer;
    text-decoration: underline;
  }

  /* ============================================================================
 * ImageDisplay — BEM CSS
 * SCRUM-268
 * ============================================================================ */

  .seekora-img-display {
    display: block;
  }

  /* Base image styles — applied to the img element directly */
  .seekora-img-display img,
  .seekora-img-carousel-main,
  .seekora-img-thumb-main,
  .seekora-img-single,
  .seekora-img-hover-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--seekora-img-border-radius, 4px);
    background-color: var(--seekora-bg-secondary, #f3f4f6);
    display: block;
    overflow: hidden;
  }

  /* Placeholder */
  .seekora-img-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--seekora-img-border-radius, 4px);
    background-color: var(--seekora-bg-secondary, #f3f4f6);
    display: block;
    overflow: hidden;
  }

  /* Hover variant wrapper */
  .seekora-img-hover {
    position: relative;
  }

  /* Carousel wrapper */
  .seekora-img-carousel {
    position: relative;
  }

  /* Carousel arrow buttons */
  .seekora-img-carousel-prev,
  .seekora-img-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: none;
    background-color: var(--seekora-carousel-btn-bg, rgba(255, 255, 255, 0.9));
    color: var(--seekora-carousel-btn-text, #111);
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    transition: background-color 150ms ease;
  }

  .seekora-img-carousel-prev:hover,
  .seekora-img-carousel-next:hover {
    background-color: var(
      --seekora-carousel-btn-bg-hover,
      rgba(255, 255, 255, 1)
    );
  }

  .seekora-img-carousel-prev {
    left: 8px;
  }

  .seekora-img-carousel-next {
    right: 8px;
  }

  /* Larger (mobile) arrow size via data-size="mobile" */
  .seekora-img-carousel-prev[data-size="mobile"],
  .seekora-img-carousel-next[data-size="mobile"] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
  }

  .seekora-img-carousel-prev[data-size="mobile"] {
    left: 4px;
  }

  .seekora-img-carousel-next[data-size="mobile"] {
    right: 4px;
  }

  /* Carousel dots container */
  .seekora-img-carousel-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--seekora-carousel-dots-bg, rgba(0, 0, 0, 0.5));
    border-radius: 12px;
    z-index: 10;
  }

  .seekora-img-carousel-dots[data-size="mobile"] {
    bottom: 12px;
    gap: 8px;
    padding: 8px 16px;
  }

  /* Carousel dot buttons */
  .seekora-img-carousel-dot {
    width: 8px;
    height: 8px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background-color: var(--seekora-carousel-dot, rgba(255, 255, 255, 0.5));
    cursor: pointer;
    transition: all 150ms ease;
  }

  .seekora-img-carousel-dot[data-size="mobile"] {
    width: 10px;
    height: 10px;
    min-width: 44px;
    min-height: 44px;
  }

  .seekora-img-carousel-dot[data-active="true"] {
    background-color: var(--seekora-carousel-dot-active, #fff);
  }

  /* ThumbStrip wrapper */
  .seekora-img-thumbstrip {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-img-thumbstrip-gap, 8px);
  }

  /* Thumbs scroll row */
  .seekora-img-thumbs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .seekora-img-thumbs[data-size="mobile"] {
    gap: 6px;
    padding-bottom: 6px;
  }

  /* Individual thumb button */
  .seekora-img-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--seekora-img-border-radius, 4px);
    overflow: hidden;
    cursor: pointer;
    background: none;
  }

  .seekora-img-thumb[data-size="mobile"] {
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
  }

  .seekora-img-thumb--active,
  .seekora-img-thumb[data-active="true"] {
    border: 2px solid var(--seekora-primary);
  }

  .seekora-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* override the base rule aspect-ratio for thumb images */
    aspect-ratio: unset;
    border-radius: 0;
    background-color: transparent;
  }

  /* ============================================================================
 * ImageZoom — BEM CSS
 * SCRUM-268
 * ============================================================================ */

  /* Root container */
  .seekora-image-zoom {
    position: relative;
    display: inline-block;
    cursor: crosshair;
    overflow: hidden;
  }

  .seekora-image-zoom[data-zoom-mode="click"] {
    cursor: zoom-in;
  }

  .seekora-image-zoom[data-zoom-mode="none"] {
    cursor: default;
  }

  /* Inner image */
  .seekora-image-zoom__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  /* Zoom indicator icon */
  .seekora-image-zoom__indicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--seekora-zoom-indicator-bg, rgba(0, 0, 0, 0.6));
    color: var(--seekora-zoom-indicator-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 150ms;
  }

  .seekora-image-zoom__indicator[data-hovering="true"] {
    opacity: 1;
  }

  /* Lens circle */
  .seekora-image-zoom__lens {
    position: absolute;
    border: var(--seekora-lens-border, 2px solid rgba(255, 255, 255, 0.8));
    border-radius: 50%;
    box-shadow: var(
      --seekora-lens-shadow,
      0 0 0 1px rgba(0, 0, 0, 0.3),
      inset 0 0 0 1px rgba(0, 0, 0, 0.3)
    );
    pointer-events: none;
    overflow: hidden;
    z-index: 100;
  }

  /* Hover area indicator overlay */
  .seekora-image-zoom__hover-area {
    position: absolute;
    border: var(--seekora-hover-area-border, 2px solid rgba(0, 0, 0, 0.3));
    background-color: var(--seekora-hover-area-bg, rgba(255, 255, 255, 0.1));
    pointer-events: none;
    z-index: 50;
  }

  /* Zoom panel (portal, fixed position) */
  .seekora-image-zoom__panel {
    position: fixed;
    background-repeat: no-repeat;
    border: 2px solid var(--seekora-border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: var(--seekora-zoom-panel-shadow, 0 8px 24px rgba(0, 0, 0, 0.2));
    background-color: var(--seekora-zoom-panel-bg, #fff);
    pointer-events: none;
    z-index: 9998;
  }

  /* Lightbox overlay (portal, fixed fullscreen) */
  .seekora-image-zoom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--seekora-lightbox-bg, rgba(0, 0, 0, 0.95));
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 20px;
  }

  /* Lightbox close button */
  .seekora-image-zoom-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: var(--seekora-lightbox-btn-bg, rgba(255, 255, 255, 0.2));
    color: var(--seekora-lightbox-btn-text, #fff);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms;
    z-index: 10001;
  }

  .seekora-image-zoom-lightbox__close:hover {
    background-color: var(
      --seekora-lightbox-btn-bg-hover,
      rgba(255, 255, 255, 0.3)
    );
  }

  /* Lightbox prev/next arrows */
  .seekora-image-zoom-lightbox__prev,
  .seekora-image-zoom-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--seekora-lightbox-btn-bg, rgba(255, 255, 255, 0.2));
    color: var(--seekora-lightbox-btn-text, #fff);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 150ms;
    z-index: 10001;
  }

  .seekora-image-zoom-lightbox__prev {
    left: 20px;
  }

  .seekora-image-zoom-lightbox__next {
    right: 20px;
  }

  .seekora-image-zoom-lightbox__prev:hover,
  .seekora-image-zoom-lightbox__next:hover {
    background-color: var(
      --seekora-lightbox-btn-bg-hover,
      rgba(255, 255, 255, 0.3)
    );
  }

  /* Lightbox image */
  .seekora-image-zoom-lightbox__img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 4px;
    cursor: default;
  }

  /* Lightbox footer (thumbnail strip + counter) */
  .seekora-image-zoom-lightbox__footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  /* Thumbnail strip row */
  .seekora-image-zoom-lightbox__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    max-width: 80vw;
    padding: 8px 0;
  }

  /* Lightbox thumbnail button */
  .seekora-image-zoom-lightbox__thumb {
    width: 60px;
    height: 60px;
    padding: 0;
    border: var(
      --seekora-lightbox-thumb-border,
      2px solid rgba(255, 255, 255, 0.3)
    );
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all 150ms ease;
    flex-shrink: 0;
    background: none;
  }

  .seekora-image-zoom-lightbox__thumb:hover {
    opacity: 1;
  }

  .seekora-image-zoom-lightbox__thumb[data-active="true"] {
    border: var(--seekora-lightbox-thumb-border-active, 3px solid #fff);
    opacity: 1;
  }

  /* Thumbnail image */
  .seekora-image-zoom-lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Counter badge */
  .seekora-image-zoom-lightbox__counter {
    color: var(--seekora-lightbox-counter-text, rgba(255, 255, 255, 0.9));
    font-size: 0.875rem;
    text-align: center;
    background-color: var(--seekora-lightbox-counter-bg, rgba(0, 0, 0, 0.5));
    padding: 4px 12px;
    border-radius: 12px;
  }

  /* Instructions bar */
  .seekora-image-zoom-lightbox__instructions {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--seekora-lightbox-instructions-text, rgba(255, 255, 255, 0.7));
    font-size: 0.875rem;
    text-align: center;
    background-color: var(
      --seekora-lightbox-instructions-bg,
      rgba(0, 0, 0, 0.5)
    );
    padding: 8px 16px;
    border-radius: 12px;
  }
  /* ── seekora-search-input-standalone ──────────────────────────────────────
   * Styles for the pure SearchInput component (no provider deps).
   * Reuses the seekora-searchbar token set for visual consistency.
   * ─────────────────────────────────────────────────────────────────────── */

  .seekora-search-input-standalone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: var(--seekora-font-family, inherit);
  }

  .seekora-search-input-standalone__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    background-color: var(--seekora-input-bg, #ffffff);
    border: 1px solid var(--seekora-border-color, #d1d5db);
    border-radius: var(--seekora-border-radius, 6px);
    transition: border-color 150ms ease, box-shadow 150ms ease;
  }

  .seekora-search-input-standalone__field:focus-within {
    border-color: var(--seekora-border-focus, var(--seekora-primary, #3b82f6));
    box-shadow: 0 0 0 3px
      var(
        --seekora-border-focus-alpha,
        var(--seekora-primary-light, rgba(59, 130, 246, 0.12))
      );
  }

  .seekora-search-input-standalone__icon {
    display: flex;
    align-items: center;
    padding: 0 8px 0 12px;
    color: var(--seekora-text-muted, #9ca3af);
    pointer-events: none;
    flex-shrink: 0;
  }

  .seekora-search-input-standalone__input {
    flex: 1;
    padding: 10px 8px;
    font-size: var(--seekora-input-font-size, 0.9375rem);
    font-family: inherit;
    color: var(--seekora-text-primary, #111827);
    background: transparent;
    border: none;
    outline: none;
    min-width: 0;
  }

  .seekora-search-input-standalone__input::placeholder {
    color: var(--seekora-text-placeholder, #9ca3af);
  }

  .seekora-search-input-standalone__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--seekora-text-muted, #9ca3af);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 150ms ease, color 150ms ease;
  }

  .seekora-search-input-standalone__clear:hover {
    background-color: var(--seekora-hover-bg, #f3f4f6);
    color: var(--seekora-text-primary, #111827);
  }

  .seekora-search-input-standalone__submit {
    flex-shrink: 0;
    padding: 10px 16px;
    font-size: var(--seekora-input-font-size, 0.9375rem);
    font-weight: 600;
    font-family: inherit;
    color: var(--seekora-primary-text, #ffffff);
    background-color: var(--seekora-primary, #3b82f6);
    border: none;
    border-radius: var(--seekora-border-radius, 6px);
    cursor: pointer;
    transition: background-color 150ms ease;
  }

  .seekora-search-input-standalone__submit:hover {
    background-color: var(--seekora-primary-hover, #2563eb);
  }

  /* ── SCRUM-268 sweep: ProductInfo ─────────────────────────────────────────
   * Migrated from inline style={{ ... }} in ProductInfo.tsx
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-product-info {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-product-info-gap, 12px);
  }

  .seekora-product-info-brand {
    font-size: var(--seekora-product-info-brand-font-size, 0.8125rem);
    color: var(--seekora-text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .seekora-product-info-title {
    font-size: var(--seekora-product-info-title-font-size, 1.25rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    margin: 0;
  }

  .seekora-product-info-price {
    font-size: var(--seekora-product-info-price-font-size, 1.125rem);
  }

  .seekora-product-info-availability {
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  .seekora-product-info-availability[data-available="true"] {
    color: var(--seekora-success, #22c55e);
  }

  .seekora-product-info-availability[data-available="false"] {
    color: var(--seekora-error, #ef4444);
  }

  .seekora-product-info-description {
    font-size: var(--seekora-font-size-sm, 0.875rem);
    color: var(--seekora-text-secondary, #6c757d);
    margin: 0;
    line-height: 1.5;
  }

  /* ── SCRUM-268 sweep: ProductRecommendations ──────────────────────────────
   * Migrated from inline style={{ ... }} in ProductRecommendations.tsx
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-product-recommendations-title {
    font-size: var(--seekora-product-recommendations-title-font-size, 1rem);
    font-weight: var(--seekora-font-weight-semibold, 600);
    margin-bottom: var(--seekora-product-recommendations-title-mb, 12px);
    margin-top: 0;
  }

  /* ── SCRUM-268 sweep: SectionError ───────────────────────────────────────
   * Migrated from inline style={{ ... }} in SectionError.tsx
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-section-error {
    padding: var(--seekora-section-error-padding, 16px);
    color: var(--seekora-error, #dc2626);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }

  /* ── SCRUM-268 sweep: CurrentRefinements close icon ──────────────────────
   * Migrated from inline style={{ lineHeight: 1 }} in CurrentRefinements.tsx
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-current-refinements__close-icon {
    line-height: 1;
  }

  /* ── SCRUM-268 sweep: SuggestionsDropdownComposition ─────────────────────
   * Migrated from inline style={{ position: 'relative', width: '100%' }}
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-suggestions-dropdown-composition {
    position: relative;
    width: 100%;
  }

  /* ── SCRUM-268 sweep: ProductCard anchor reset ────────────────────────────
   * Migrated from inline style={{ textDecoration: "none", color: "inherit" }}
   * ─────────────────────────────────────────────────────────────────────── */
  a.seekora-product-card {
    text-decoration: none;
    color: inherit;
  }

  /* ── SCRUM-268 sweep: MinimalDropdown list wrapper ────────────────────────
   * Duplicated rule removed; canonical form lives at line ~2671 with correct
   * descendant selector (space-separated). maxHeight kept inline (runtime).
   * ─────────────────────────────────────────────────────────────────────── */

  /* ── SCRUM-268 sweep: BadgeList ───────────────────────────────────────────
   * Migrated from inline style={{ display/flexWrap/gap/zIndex/position }}
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-xs, 4px);
    z-index: 2;
  }

  .seekora-badge-list--top-left {
    position: absolute;
    top: var(--seekora-spacing-sm, 8px);
    left: var(--seekora-spacing-sm, 8px);
  }

  .seekora-badge-list--top-right {
    position: absolute;
    top: var(--seekora-spacing-sm, 8px);
    right: var(--seekora-spacing-sm, 8px);
  }

  .seekora-badge-list--bottom-left {
    position: absolute;
    bottom: var(--seekora-spacing-sm, 8px);
    left: var(--seekora-spacing-sm, 8px);
  }

  .seekora-badge-list--bottom-right {
    position: absolute;
    bottom: var(--seekora-spacing-sm, 8px);
    right: var(--seekora-spacing-sm, 8px);
  }

  /* position=inline → no special positioning, just flows in the document */
  .seekora-badge-list--inline {
    position: static;
  }

  .seekora-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--seekora-border-radius-sm, 4px);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ── SCRUM-268 sweep: ItemCard image wrapper ──────────────────────────────
   * Static structural styles migrated from inline style={{ position/overflow/borderRadius }}
   * Dynamic horizontal-layout dims (minWidth/flexBasis/maxWidth) remain inline.
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-item-card__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--seekora-border-radius-sm, 4px);
  }

  /* ── SCRUM-268 sweep: AnalyticsProvider / withAnalytics wrapper ───────────
   * Migrated from inline style={{ display: 'contents' }}
   * ─────────────────────────────────────────────────────────────────────── */
  .seekora-analytics-wrapper {
    display: contents;
  }

  /* ── SCRUM-274 — BEM CSS that 2405ea8 forgot ──────────────────────────────
   * The inline-styles → BEM migration in `2405ea8 feat(react): InfiniteHits
   * + RangeInput + SearchLayout + ActionButtons + CustomSelect + PriceDisplay
   * — migrate inline styles to BEM CSS SCRUM-268` swapped JSX `style={{}}`
   * for className="seekora-*" on these six components, but never landed
   * matching rules in this file. The published @next snapshots since then
   * have shipped className-only DOM with no governing CSS — every demo
   * store's `<SearchResults>` page collapses to vertically-stacked sidebar
   * + main because nothing sets `display: flex` on the body wrapper.
   *
   * Each block below replays the exact properties the original inline
   * styles supplied. Values that consumers used to pass as props (eg
   * SearchLayout's `sidebarWidth`) are still applied inline by the
   * component when non-default; the BEM defaults below only kick in when
   * the consumer didn't override.
   * ─────────────────────────────────────────────────────────────────────── */

  /* SearchLayout */
  .seekora-search-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
  }
  .seekora-search-layout__header {
    padding: var(--seekora-spacing-md, 1rem);
    border-bottom: 1px solid var(--seekora-color-border, rgba(0, 0, 0, 0.08));
  }
  .seekora-search-layout__body {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    gap: var(--seekora-spacing-lg, 1.5rem);
    padding: var(--seekora-spacing-md, 1rem);
    overflow: visible;
  }
  .seekora-search-layout__body[data-mobile="true"] {
    flex-direction: column;
  }
  .seekora-search-layout__sidebar {
    width: 300px;
    min-width: 300px;
    flex-shrink: 0;
  }
  .seekora-search-layout__body[data-mobile="true"]
    .seekora-search-layout__sidebar {
    width: 100%;
    min-width: 100%;
  }
  .seekora-search-layout__content {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: auto;
  }
  .seekora-search-layout__footer {
    padding: var(--seekora-spacing-md, 1rem);
    border-top: 1px solid var(--seekora-color-border, rgba(0, 0, 0, 0.08));
  }

  /* InfiniteHits — main grid container + sentinel + loader/error states */
  .seekora-infinite-hits {
    display: grid;
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--seekora-product-card-min-width, 240px), 1fr)
    );
    gap: var(--seekora-spacing-md, 1rem);
    width: 100%;
  }
  .seekora-infinite-hits__sentinel {
    grid-column: 1 / -1;
    height: 1px;
    width: 100%;
  }
  .seekora-infinite-hits__loader,
  .seekora-infinite-hits__error,
  .seekora-infinite-hits__end {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--seekora-spacing-md, 1rem);
    color: var(--seekora-color-text-muted, #6b7280);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }
  .seekora-infinite-hits__error {
    color: var(--seekora-color-danger, #dc2626);
  }

  /* RangeInput — slider + numeric inputs */
  .seekora-range-input {
    display: flex;
    flex-direction: column;
    gap: var(--seekora-spacing-sm, 0.5rem);
    width: 100%;
  }
  .seekora-range-input__inputs {
    display: flex;
    align-items: center;
    gap: var(--seekora-spacing-sm, 0.5rem);
  }
  .seekora-range-input__field {
    flex: 1;
    min-width: 0;
    padding: var(--seekora-spacing-xs, 0.25rem)
      var(--seekora-spacing-sm, 0.5rem);
    border: 1px solid var(--seekora-color-border, rgba(0, 0, 0, 0.16));
    border-radius: var(--seekora-border-radius, 4px);
    font-size: var(--seekora-font-size-sm, 0.875rem);
    background: var(--seekora-color-bg, #fff);
    color: var(--seekora-color-text, #111827);
  }
  .seekora-range-input__separator {
    color: var(--seekora-color-text-muted, #6b7280);
    font-size: var(--seekora-font-size-sm, 0.875rem);
  }
  .seekora-range-input__slider {
    width: 100%;
  }
  .seekora-range-input__error {
    color: var(--seekora-color-danger, #dc2626);
    font-size: var(--seekora-font-size-xs, 0.75rem);
  }

  /* ActionButtons — horizontal row of pill buttons */
  .seekora-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seekora-spacing-sm, 0.5rem);
    align-items: center;
  }

  /* PriceDisplay — inline grouping for current + original price */
  .seekora-price-display {
    display: inline-flex;
    align-items: baseline;
    gap: var(--seekora-spacing-xs, 0.25rem);
    font-variant-numeric: tabular-nums;
  }
  .seekora-price-display__current {
    font-weight: var(--seekora-font-weight-semibold, 600);
    color: var(--seekora-color-text, #111827);
  }
  .seekora-price-display__original {
    color: var(--seekora-color-text-muted, #6b7280);
    text-decoration: line-through;
    font-size: 0.875em;
  }
  .seekora-price-display__discount {
    color: var(--seekora-color-success, #16a34a);
    font-size: 0.875em;
    margin-left: var(--seekora-spacing-xs, 0.25rem);
  }
} /* end @layer seekora-component */

/* ─── seekora-override: critical layout rules that must win against theme ─── */
/*
 * Rules in this layer always beat seekora-component and seekora-base.
 * Selectors are prefixed with [data-seekora-surface] (attr + class = 0,2,0
 * specificity) to beat plain element rules from themes.
 * Properties marked OVERRIDE-CRITICAL also carry !important to survive
 * theme !important declarations. Keep this allowlist small.
 *
 * Consumers: add data-seekora-surface to the root wrapper of any Seekora
 * widget mount point (SearchBar, dropdown portals, etc.) to activate these.
 */
@layer seekora-override {
  /* -- SearchBar: input font-size + padding must not be hijacked by theme -- */
  /* OVERRIDE-CRITICAL: theme rules like `input { font-size: 20px !important }` break layout */
  [data-seekora-surface] .seekora-searchbar__input {
    font-size: var(--seekora-searchbar-font-size) !important;
    padding: var(--seekora-searchbar-padding-v) 1rem
      var(--seekora-searchbar-padding-v) var(--seekora-searchbar-padding-left) !important;
    box-sizing: border-box !important;
  }

  /* -- SearchBar: container display:flex must survive theme overrides -- */
  [data-seekora-surface] .seekora-searchbar {
    display: flex !important;
    position: relative !important;
  }

  [data-seekora-surface] .seekora-searchbar__input-wrap {
    position: relative !important;
    flex: 1 !important;
    display: flex !important;
  }

  /* -- Suggestions dropdown: positioning is non-negotiable -- */
  /* OVERRIDE-CRITICAL: dropdown must appear below the input at correct position */
  [data-seekora-surface] .seekora-searchbar__suggestions {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--seekora-z-dropdown, 9999) !important;
    background-color: var(--seekora-bg-surface, #ffffff) !important;
    overflow-y: auto !important;
  }

  /* -- Generic dropdown variants: position + z-index -- */
  [data-seekora-surface] .seekora-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background-color: var(--seekora-bg-surface, #ffffff) !important;
    overflow: hidden !important;
  }

  /* -- MobileFilters: modal backdrop + drawer z-index -- */
  /* OVERRIDE-CRITICAL: modal must layer above store content */
  [data-seekora-surface] .seekora-mobile-filters-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: var(--seekora-z-modal, 10000) !important;
  }

  [data-seekora-surface] .seekora-mobile-filters-drawer {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    z-index: calc(var(--seekora-z-modal, 10000) + 1) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* -- SearchIcon / clear button absolute positioning -- */
  [data-seekora-surface] .seekora-searchbar__icon {
    position: absolute !important;
    z-index: 2 !important;
  }

  [data-seekora-surface] .seekora-searchbar__clear {
    position: absolute !important;
    z-index: 2 !important;
  }

  /* -- SearchResults grid/list layout containers -- */
  [data-seekora-surface] .seekora-results {
    display: grid !important;
  }

  /* -- Facet dropdown: position absolute for floating panel -- */
  [data-seekora-surface] .seekora-facet-dropdown__panel {
    position: absolute !important;
    z-index: 150 !important;
  }
} /* end @layer seekora-override */

/* ===========================================================================
   CustomSelect (primitives/CustomSelect.tsx) — overlay dropdown.
   The component shipped these classes with no CSS, so the menu rendered in
   normal flow and pushed following content (e.g. the results grid) down. The
   menu MUST be an absolutely-positioned overlay. Colors use the documented
   --seekora-select-* vars with light defaults; consumers override via tokens.
   =========================================================================== */
.seekora-select {
  position: relative;
  display: inline-block;
  font-size: var(--seekora-select-font-size, 0.875rem);
}
.seekora-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
  line-height: 1.2;
  padding: 0.5rem 0.75rem;
  background: var(--seekora-select-bg, #fff);
  color: var(--seekora-select-color, inherit);
  border: 1px solid var(--seekora-select-border, rgba(128, 128, 128, 0.3));
  border-radius: var(--seekora-select-radius, 6px);
}
.seekora-select__trigger:focus-visible {
  outline: 2px solid var(--seekora-select-active-bg, #eff6ff);
  outline-offset: 1px;
}
.seekora-select__chevron {
  flex: none;
  transition: transform 0.15s ease;
}
.seekora-select__chevron--open {
  transform: rotate(180deg);
}
.seekora-select__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  z-index: var(--seekora-z-dropdown, 9999);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--seekora-select-bg, #fff);
  color: var(--seekora-select-color, inherit);
  border: 1px solid var(--seekora-select-border, rgba(128, 128, 128, 0.3));
  border-radius: var(--seekora-select-radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.seekora-select__option {
  padding: 0.5rem 0.625rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--seekora-select-color, inherit);
}
.seekora-select__option:hover,
.seekora-select__option--highlighted {
  background: var(--seekora-select-hover-bg, #f3f4f6);
}
.seekora-select__option--selected {
  background: var(--seekora-select-active-bg, #eff6ff);
  color: var(--seekora-select-active-color, inherit);
  font-weight: 600;
}
.seekora-select__option--disabled {
  opacity: 0.5;
  cursor: default;
}

/* ===========================================================================
   Fallback defaults for theme vars that components reference WITHOUT a var()
   default. Without these, an un-themed consumer renders collapsed/unstyled
   controls (e.g. the searchbar shrinks to text height; sort/select lose their
   surface). :where(:root) has ZERO specificity, so any consumer :root / .dark
   override still wins — these only fill the gaps.
   =========================================================================== */
:where(:root) {
  --seekora-primary: #4d66fe;
  --seekora-searchbar-bg: #ffffff;
  --seekora-searchbar-border: #e5e7eb;
  --seekora-searchbar-focus-border: var(--seekora-primary, #4d66fe);
  --seekora-searchbar-font-size: 1rem;
  --seekora-searchbar-icon-color: #6b7280;
  --seekora-searchbar-icon-left: 0.875rem;
  --seekora-searchbar-icon-right: 0.5rem;
  --seekora-searchbar-padding-left: 2.5rem;
  --seekora-searchbar-padding-v: 0.625rem;
  --seekora-searchbar-radius: 8px;
  --seekora-searchbar-transition: 0.15s ease;
  --seekora-sort-bg: #ffffff;
  --seekora-sort-color: #1c1917;
  --seekora-sort-border: rgba(128, 128, 128, 0.3);
  --seekora-sort-active-bg: #eff6ff;
  --seekora-sort-active-color: #1c1917;
  --seekora-swatch-bg: #f3f4f6;
}

/* ===========================================================================
   Dark-mode defaults for the SDK theme vars. Components reference these with
   hardcoded LIGHT fallbacks (e.g. var(--seekora-text-primary, #212529)), so any
   consumer in dark mode that doesn't remap every var gets invisible text. These
   blocks give neutral dark values for both class-based dark (.dark /
   [data-theme="dark"]) and system dark (prefers-color-scheme). :where() = ZERO
   specificity, so a consumer that defines its own --seekora-* (e.g. mapped to
   brand tokens) still wins.
   =========================================================================== */
:where(.dark) , :where([data-theme="dark"]) {
  --seekora-text-primary: #e7e5e4;
  --seekora-text-secondary: #a8a29e;
  --seekora-text-muted: #a8a29e;
  --seekora-color-text: #e7e5e4;
  --seekora-color-text-muted: #a8a29e;
  --seekora-color-bg: #0f0f0f;
  --seekora-bg-surface: #1c1917;
  --seekora-bg-secondary: #1c1917;
  --seekora-bg-hover: #292524;
  --seekora-input-bg: #1c1917;
  --seekora-border-color: #44403c;
  --seekora-card-bg: #1c1917;
  --seekora-card-border: #44403c;
  --seekora-searchbar-bg: #1c1917;
  --seekora-searchbar-border: #44403c;
  --seekora-searchbar-icon-color: #a8a29e;
  --seekora-sort-bg: #1c1917;
  --seekora-sort-color: #e7e5e4;
  --seekora-sort-border: #44403c;
  --seekora-sort-active-bg: #292524;
  --seekora-sort-active-color: #e7e5e4;
  --seekora-select-bg: #1c1917;
  --seekora-select-color: #e7e5e4;
  --seekora-select-border: #44403c;
  --seekora-select-hover-bg: #292524;
  --seekora-select-active-bg: #292524;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not(.light):not([data-theme="light"])) {
    --seekora-text-primary: #e7e5e4;
    --seekora-text-secondary: #a8a29e;
    --seekora-text-muted: #a8a29e;
    --seekora-color-text: #e7e5e4;
    --seekora-color-text-muted: #a8a29e;
    --seekora-color-bg: #0f0f0f;
    --seekora-bg-surface: #1c1917;
    --seekora-bg-secondary: #1c1917;
    --seekora-bg-hover: #292524;
    --seekora-input-bg: #1c1917;
    --seekora-border-color: #44403c;
    --seekora-card-bg: #1c1917;
    --seekora-card-border: #44403c;
    --seekora-searchbar-bg: #1c1917;
    --seekora-searchbar-border: #44403c;
    --seekora-searchbar-icon-color: #a8a29e;
    --seekora-sort-bg: #1c1917;
    --seekora-sort-color: #e7e5e4;
    --seekora-sort-border: #44403c;
    --seekora-sort-active-bg: #292524;
    --seekora-sort-active-color: #e7e5e4;
    --seekora-select-bg: #1c1917;
    --seekora-select-color: #e7e5e4;
    --seekora-select-border: #44403c;
    --seekora-select-hover-bg: #292524;
    --seekora-select-active-bg: #292524;
  }
}
