/* The installed FiboSearch presentation, scoped to the v2 owner and its payload. */
.en-search-v2-combobox {
  --en-search-text: #1c2430;
  --en-search-muted: #5e6976;
  --en-search-border: #d9dee3;
  --en-search-selection: #e9eef4;
  --en-search-focus: #355f88;
  position: relative;
  min-width: 0;
  container-type: inline-size;
  color: var(--en-search-text);
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.en-search-v2-combobox > input { width: 100%; }
/* Do not restore the vendor ownership selector: only the existing input's appearance. */
.en-search-v2-combobox > input.en-search-v2-vendor-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 10px 60px 10px 15px;
  border: 1px solid var(--en-search-border);
  border-radius: 8px;
  background: #fff;
  color: var(--en-search-text);
  font: inherit;
  appearance: none;
  box-shadow: none;
}
.en-search-v2-combobox > input.en-search-v2-vendor-input:focus-visible { outline: 2px solid var(--en-search-focus); outline-offset: 2px; }
.en-search-v2-popup {
  position: absolute;
  z-index: 100000;
  inset-inline: 0;
  top: 100%;
  background: #fff;
  border: 1px solid var(--en-search-border);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 40px rgb(28 36 48 / 16%), 0 2px 5px rgb(28 36 48 / 4%);
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
}
.en-search-v2-popup[hidden], .en-search-v2-panel[hidden], .en-search-v2-footer[hidden], .en-search-v2-preview[hidden] { display: none !important; }
.en-search-v2-panel, .en-search-v2-footer { box-sizing: border-box; min-width: 0; max-width: 100vw; overflow-wrap: anywhere; }
.en-search-v2-panel { max-height: min(60vh, 600px); overflow: auto; padding: 10px; }
.en-search-v2-group + .en-search-v2-group { border-top: 1px solid var(--en-search-border); }
.en-search-v2-group__heading, .en-search-v2-pending__label { padding: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--en-search-muted); }
.en-search-v2-option {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--en-search-text);
  text-decoration: none;
  line-height: 1.35;
  transition: background 140ms cubic-bezier(.2, 0, 0, 1);
}
.en-search-v2-option:hover, .en-search-v2-option[aria-selected=true] { background: var(--en-search-selection); color: var(--en-search-text); }
.en-search-v2-option:focus-visible, .en-search-v2-option[role=option][aria-selected=true] { outline: 2px solid var(--en-search-focus); outline-offset: -2px; }
.en-search-v2-option img { display: block; width: 50px; height: 66px; max-width: 50px; margin: 0; padding: 2px; background: #fff; border: 1px solid #e8e8e8; border-radius: 3px; object-fit: contain; object-position: center; flex: none; }
.en-search-v2-option__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.en-search-v2-option__body strong { color: inherit; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.en-search-v2-option__body > span { font-size: 12px; color: var(--en-search-muted); }
.en-search-v2-option__price { display: flex; flex: 0 1 145px; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--en-search-text); text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.en-search-v2-option__price small { font-size: 11px; font-weight: 400; color: var(--en-search-muted); }
.en-search-v2-footer { background: #fff; border-top: 1px solid var(--en-search-border); }
.en-search-v2-all { display: block; min-height: 44px; padding: 12px 14px; color: var(--en-search-text); font-size: 12px; font-weight: 600; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.en-search-v2-all__query { text-transform: none; }
.en-search-v2-all:hover { background: var(--en-search-selection); }
.en-search-v2-all:focus-visible, .en-search-v2-preview__link:focus-visible { outline: 2px solid var(--en-search-focus); outline-offset: -3px; }
.en-search-v2-empty { margin: 0; padding: 18px; text-align: center; color: var(--en-search-muted); }
.en-search-v2-preview { display: none; }
/* On a computer screen the popup is at least wide enough for the list and the preview beside it, even when the
   search field is narrower (a laptop-width window): the script gives it its width and keeps it inside the
   viewport. A popup wider than its field is a panel of its own, with a top border and all four corners. */
@media (min-width: 850px) {
  .en-search-v2-popup { inset-inline: auto; left: var(--en-search-popup-shift, 0px); width: var(--en-search-popup-width, 100%); }
  .en-search-v2-popup.is-wider { margin-top: 4px; border-top: 1px solid var(--en-search-border); border-radius: 12px; }
}
/* The real FiboSearch detail-box layout is useful only when the popup is wide enough: the script marks it. */
.en-search-v2-popup.has-preview.is-roomy { display: grid; grid-template-columns: minmax(0, 1fr) 36%; grid-template-rows: minmax(0, 1fr) auto; }
.en-search-v2-popup.has-preview.is-roomy > .en-search-v2-panel { grid-column: 1; grid-row: 1; }
.en-search-v2-popup.has-preview.is-roomy > .en-search-v2-footer { grid-column: 1; grid-row: 2; }
/* The list sets the popup's height and the preview fills it: size containment keeps a tall preview
   from stretching the popup and leaving a blank band under a short list. Its image shrinks to fit. */
.en-search-v2-popup.has-preview.is-roomy > .en-search-v2-preview { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 20px; border-left: 1px solid var(--en-search-border); background: #f5f6f7; container: en-search-preview / size; overflow: hidden; }
.en-search-v2-preview__link { display: flex; flex: 0 1 auto; min-height: 0; flex-direction: column; gap: 12px; overflow: hidden; color: var(--en-search-text); overflow-wrap: anywhere; }
/* The image takes what is left once name, SKU and price have their room, never less than 96 px. */
.en-search-v2-preview__link img { flex: 0 1 auto; width: 100%; height: min(28vh, 280px); min-height: 96px; object-fit: contain; object-position: center; background: #fff; }
/* Under 250 px a 96 px picture no longer fits beside a three-line name, SKU and price: show those only. */
@container en-search-preview (max-height: 250px) { .en-search-v2-preview__link img { display: none; } }
.en-search-v2-preview__link strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; flex: none; font-size: 16px; line-height: 1.4; font-weight: 600; }
/* Fewer whole lines when even three do not fit beside SKU and a two-line price (never a line cut through). */
@container en-search-preview (max-height: 145px) { .en-search-v2-preview__link strong { -webkit-line-clamp: 2; } }
@container en-search-preview (max-height: 122px) { .en-search-v2-preview__link strong { -webkit-line-clamp: 1; } }
/* Product details under name, SKU and price: whole rows only, and only when the pane has room for them. */
.en-search-v2-preview__attributes { display: grid; flex: none; gap: 4px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--en-search-border); font-size: 12px; line-height: 1.35; }
.en-search-v2-preview__attributes > div { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 8px; }
.en-search-v2-preview__attributes dt { margin: 0; color: var(--en-search-muted); font-weight: 400; overflow-wrap: anywhere; }
.en-search-v2-preview__attributes dd { margin: 0; color: var(--en-search-text); font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@container en-search-preview (max-height: 520px) { .en-search-v2-preview__attributes > div:nth-child(n+4) { display: none; } }
@container en-search-preview (max-height: 420px) { .en-search-v2-preview__attributes { display: none; } }
.en-search-v2-preview__sku { color: var(--en-search-muted); font-size: 12px; overflow-wrap: anywhere; }
.en-search-v2-preview > .en-search-v2-option__price { flex: none; text-align: left; font-size: 15px; }
.en-search-v2-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Suggested refinements read as "add", the active filters (×) as "remove". */
.en-search-v2-chips button.en-search-v2-refine { background: #fff; border-style: dashed; }
.en-search-v2-chips button.en-search-v2-preference { background: var(--en-search-selection); }
.en-search-v2-chips button.en-search-v2-refine:hover { background: var(--en-search-selection); }
.en-search-v2-chips button:focus-visible { outline: 2px solid var(--en-search-focus); outline-offset: 2px; }
.en-search-v2-refine__count { color: var(--en-search-muted); font-variant-numeric: tabular-nums; }
/* Suggestions belong to the open popup: Escape or a press outside takes them away with it. */
.en-search-v2-combobox:not(.is-open) > .en-search-v2-chips > .en-search-v2-refine { display: none; }
.en-search-v2-chips button { font: inherit; font-size: 13px; line-height: 1.3; letter-spacing: 0; text-transform: none; margin: 0; border: 1px solid #7b8794; border-radius: 6px; background: #e9eef4; color: #1c2430; padding: 6px 10px; min-height: 44px; overflow-wrap: anywhere; max-width: 100%; }
/* On a phone the chips are one line that scrolls sideways, so they never push the list down. The block
   padding keeps the focus outline inside the scroller's clip. */
@media (max-width: 849px) {
  .en-search-v2-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .en-search-v2-combobox.is-open > .en-search-v2-chips:not(:empty) { padding: 4px; }
  /* Its own rule: a browser without :has() drops only this one. */
  .en-search-v2-chips:has(> :not(.en-search-v2-refine)) { padding: 4px; }
  .en-search-v2-chips button { flex: none; max-width: none; white-space: nowrap; overflow-wrap: normal; }
}
/* With the popup open the chip row is its first row, not a transparent gap above it. */
@media (min-width: 850px) {
  .en-search-v2-combobox.is-open > .en-search-v2-chips:not(:empty) { position: relative; z-index: 100000; padding: 8px 10px; background: #fff; border: solid var(--en-search-border); border-width: 0 1px; }
}
.en-search-v2-exact-choices { margin: .75rem 0; }
.en-search-v2-exact-choice { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 44px; padding: .5rem; border: 1px solid #bbc8cc; margin: .3rem 0; overflow-wrap: anywhere; }
.en-search-v2-exact-choice img { object-fit: contain; flex: none; }
.en-search-v2-exact-choice:focus-visible { outline: 2px solid #355f88; outline-offset: 2px; }
.en-search-v2-combobox.is-loading::after, .en-search-v2-combobox.is-navigating::after { content: ""; position: absolute; right: 50px; top: 20px; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--en-search-focus); border-right-color: transparent; border-radius: 50%; animation: en-search-spin .7s linear infinite; }
@keyframes en-search-spin { to { transform: rotate(360deg); } }
/* Explicit preparation actions remain reachable without a theme button reset. */
.en-search-v2-footer > .en-search-v2-preparation, .en-search-v2-preparation-panel > button { box-sizing: border-box; min-height: 44px; padding: 10px 14px; margin: 0; border: 1px solid #7b8794; border-radius: 6px; background: #e9eef4; color: #1c2430; font: inherit; text-transform: none; cursor: pointer; }
.en-search-v2-footer > .en-search-v2-preparation { width: 100%; }
.en-search-v2-preparation:focus-visible, .en-search-v2-preparation-panel > button:focus-visible { outline: 2px solid #355f88; outline-offset: -3px; }
.en-search-v2-preparation[aria-disabled=true], .en-search-v2-preparation-panel > button[aria-disabled=true] { opacity: .65; cursor: wait; }
/* Small screens: the popup ends after its last row instead of stretching to the viewport bottom. */
@media (max-width: 849px) {
  .en-search-v2-combobox > input.en-search-v2-vendor-input { height: 44px; min-height: 44px; font-size: 16px; }
  .en-search-v2-popup, .en-search-v2-popup.has-preview { position: fixed; top: var(--en-search-popup-top, 64px); bottom: auto; inset-inline: 8px; display: flex; flex-direction: column; max-height: calc(var(--en-search-popup-height, 100vh) - var(--en-search-popup-top, 64px) - 8px); border-top: 1px solid var(--en-search-border); border-radius: 8px; }
  .en-search-v2-popup > .en-search-v2-panel { flex: 0 1 auto; min-height: 0; max-height: none; padding: 6px; }
  .en-search-v2-popup > .en-search-v2-footer { flex: none; }
  .en-search-v2-popup.has-preview > .en-search-v2-preview { display: none; }
  .en-search-v2-option, .en-search-v2-skeleton { min-height: 48px; gap: 8px; padding: 8px; }
  .en-search-v2-option__price { flex-basis: 102px; font-size: 12px; }
  .en-search-v2-option__body strong { font-size: 14px; }
}
@media (max-width: 540px) {
  .en-search-v2-option--products, .en-search-v2-option--exact { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 5px 10px; }
  .en-search-v2-option--products > img, .en-search-v2-option--exact > img { grid-column: 1; grid-row: 1 / 3; }
  .en-search-v2-option--products > .en-search-v2-option__body, .en-search-v2-option--exact > .en-search-v2-option__body { grid-column: 2; grid-row: 1; }
  .en-search-v2-option--products > .en-search-v2-option__price, .en-search-v2-option--exact > .en-search-v2-option__price { grid-column: 2; grid-row: 2; text-align: left; font-size: 13px; }
}
/* Suggestions kept on screen while the next answer loads read as pending, not final. */
.en-search-v2-panel[aria-busy=true] { opacity: .85; cursor: progress; transition: opacity .12s linear .15s; }
/* A followed row stays on screen, marked, until the next page replaces this one. */
.en-search-v2-combobox.is-navigating .en-search-v2-popup { cursor: progress; }
.en-search-v2-popup a.is-navigating { background: var(--en-search-selection); color: var(--en-search-text); outline: 2px solid var(--en-search-focus); outline-offset: -2px; }
/* Pending: a thin bar along the popup's top edge, shown only once a search request has run 300 ms (not
   counting the typing debounce). It takes no space, so nothing moves when it appears. */
.en-search-v2-popup::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--en-search-focus) 25%, var(--en-search-focus) 75%, transparent) no-repeat; background-size: 40% 100%; opacity: 0; pointer-events: none; }
.en-search-v2-combobox.is-requesting .en-search-v2-popup::before { opacity: 1; animation: en-search-wait 300ms, en-search-bar 1.1s linear 300ms infinite; }
@keyframes en-search-wait { from, to { opacity: 0; } }
@keyframes en-search-bar { from { background-position: -70% 0; } to { background-position: 170% 0; } }
/* The first search's placeholder rows match a product row's box (image 50x66, two text lines, price).
   They show at once as static grey blocks, so the popup never has a blank area; the shimmer starts only
   after 300 ms, so a fast answer replaces still blocks. */
.en-search-v2-skeleton { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 10px; }
.en-search-v2-skeleton i { display: block; border-radius: 3px; background: #eef1f4 linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent) no-repeat; background-size: 40% 100%; background-position: -70% 0; animation: en-search-bar 1.4s linear 300ms infinite; }
.en-search-v2-skeleton__image { flex: none; width: 50px; height: 66px; padding: 2px; border: 1px solid transparent; }
.en-search-v2-skeleton__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 8px; }
.en-search-v2-skeleton__body > i { height: 12px; width: 70%; }
.en-search-v2-skeleton__body > i + i { width: 30%; }
.en-search-v2-skeleton__price { flex: 0 1 80px; height: 12px; }
@media (prefers-reduced-motion: reduce) {
  .en-search-v2-combobox.is-loading::after, .en-search-v2-combobox.is-navigating::after { animation: none; }
  /* Static: the bar is a plain line (still after 300 ms) and the placeholders do not shimmer. */
  .en-search-v2-popup::before { background: var(--en-search-focus); }
  .en-search-v2-combobox.is-requesting .en-search-v2-popup::before { animation: en-search-wait 300ms; }
  .en-search-v2-skeleton i { background-image: none; animation: none; }
  .en-search-v2-panel[aria-busy=true] { transition: none; }
  .en-search-v2-option { transition: none; }
}