.smart-search,
.smart-search__field--portaled,
.smart-search__results--portaled {
  --smart-search-bg: #fff;
  --smart-search-text: #1a1a1a;
  --smart-search-accent: #000;
  --smart-search-accent-text: #fff;
  --smart-search-secondary: color-mix(in srgb, var(--smart-search-text) 6%, var(--smart-search-bg));
  --smart-search-muted: color-mix(in srgb, var(--smart-search-text) 62%, var(--smart-search-bg));
  --smart-search-border: color-mix(in srgb, var(--smart-search-text) 12%, var(--smart-search-bg));
  /* Height of the glass overlay a card reserves at its bottom edge. */
  --smart-search-card-chrome: 50px;
}

.smart-search {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  color: var(--smart-search-text);
  font-family: inherit;
}

.smart-search__field {
  position: relative;
  display: flex;
  align-items: center;
}

.smart-search__field--portaled {
  position: fixed;
  z-index: 9998;
  box-sizing: border-box;
  color: var(--smart-search-text);
  font-family: inherit;
  transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), left 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-search__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  padding: 14px 52px;
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  color: var(--smart-search-text) !important;
  border: 0 !important;
  border-radius: var(--smart-search-field-radius, 999px);
  background: var(--smart-search-secondary) !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.smart-search__input::placeholder {
  color: var(--smart-search-muted);
  opacity: 1;
}

.smart-search__input:focus {
  outline: none;
  background: var(--smart-search-bg) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--smart-search-accent) 42%, var(--smart-search-bg)) !important;
}

.smart-search__icon {
  position: absolute;
  display: flex;
  align-items: center;
  color: var(--smart-search-muted);
  pointer-events: none;
}

.smart-search__icon--ai {
  left: 20px;
  font-size: 18px;
  color: var(--smart-search-accent);
}

.smart-search__icon--search {
  right: 20px;
}

/* hidden must always win. The attribute only carries the UA's plain
   display: none, which any author display rule outranks — and conversation
   mode sets display: flex on this same element, which kept the panel
   painted after the takeover's × hid it. */
.smart-search__results[hidden] {
  display: none !important;
}

.smart-search__results--portaled {
  position: fixed;
  margin-top: 8px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  color: var(--smart-search-text);
  background: var(--smart-search-bg);
  border: 0;
  border-radius: var(--smart-search-panel-radius, 16px);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.12),
    0 3px 12px rgba(0, 0, 0, 0.06);
  z-index: 9999;
  /* The panel never scrolls. JS measures the room between the field and the
     bottom of the viewport, writes it here, then trims its own content to
     fit (see fitPanel) so every row on screen is a whole row. */
  max-height: var(--smart-search-panel-max, 62vh);
  overflow: hidden;
  font-family: inherit;
  animation: smart-search-panel-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smart-search-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Themes style bare `button` elements — uppercase labels, their own display
   font, a 40px+ min-height for tap targets. Portaling the panel to <body> puts
   it out of reach of the theme's section-scoped selectors, but not of a plain
   `button {}` rule, which would otherwise silently outrank anything the panel
   never declares for itself. Every control the panel draws opts out here, and
   the component rules below restate whatever they actually need. */
.smart-search__chip,
.smart-search__add-to-cart,
.smart-search__list-item,
.smart-search__card-open,
.smart-search__conversation-send,
.smart-search__question-starter,
.smart-search__conversation-toggle,
.smart-search__conversation-back {
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-weight: inherit;
  text-transform: none;
  text-decoration: none;
  letter-spacing: normal;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

/* Each block of the panel is a section; adjacent sections carry the rule
   between them, so a section that gets trimmed away takes its divider with it. */
.smart-search__section {
  padding: 11px 16px 13px;
}

.smart-search__section + .smart-search__section {
  border-top: 1px solid var(--smart-search-border);
}

/* Section labels (Try asking for / Recent / N matches / Closest matches) */
.smart-search__section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--smart-search-muted);
}

.smart-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

/* Pill geometry and color are merchant-editable from the theme editor; each
   property falls back to the theme-derived default when the setting is unset. */
.smart-search__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  border: 1px solid var(--smart-search-pill-border, var(--smart-search-border));
  border-radius: var(--smart-search-pill-radius, 999px);
  background: var(--smart-search-pill-bg, var(--smart-search-bg));
  /* Padding sets the pill's height on its own; the gap and icon are in em so
     they track the label instead. Horizontal padding is derived from the
     vertical so one setting keeps the shape proportionate. */
  padding: var(--smart-search-pill-padding, 4.4px)
    calc(var(--smart-search-pill-padding, 4.4px) * 2.2);
  font: inherit;
  font-size: var(--smart-search-pill-text-size, 11.5px);
  line-height: 1.3;
  cursor: pointer;
  color: var(--smart-search-pill-text, var(--smart-search-text));
  text-align: left;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Tinting with the pill's own text color darkens light pills and lightens dark
   ones, so hover reads correctly against any merchant-chosen fill. */
.smart-search__chip:hover {
  box-shadow: inset 0 0 0 999px color-mix(in srgb, currentColor 9%, transparent);
  border-color: color-mix(in srgb, currentColor 26%, transparent);
}

/* Prompt pills carry the storefront accent; search history stays quiet. */
.smart-search__section[data-section="examples"] .smart-search__chip {
  border-color: var(--smart-search-pill-border, color-mix(in srgb, var(--smart-search-accent) 20%, var(--smart-search-bg)));
  background: var(--smart-search-pill-bg, color-mix(in srgb, var(--smart-search-accent) 6%, var(--smart-search-bg)));
}

.smart-search__chip:focus-visible {
  outline: 2px solid var(--smart-search-accent);
  outline-offset: 2px;
}

.smart-search__chip--recent {
  border-color: var(--smart-search-pill-border, transparent);
  background: var(--smart-search-pill-bg, var(--smart-search-secondary));
  color: var(--smart-search-pill-text, var(--smart-search-muted));
}

.smart-search__chip-icon {
  display: flex;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.6;
}

.smart-search__chip-icon svg {
  width: 1.05em;
  height: 1.05em;
}

.smart-search__chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-search__chip-trend-arrow {
  flex-shrink: 0;
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.68;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.smart-search__chip--trending:hover .smart-search__chip-trend-arrow,
.smart-search__chip--trending:focus-visible .smart-search__chip-trend-arrow {
  opacity: 1;
  transform: translate(1px, -1px);
}

.smart-search__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 2px -10px 0;
  /* Hover-wash rounding tracks the merchant's pill shape, capped so a full
     stadium setting doesn't turn a wide row into a lozenge. */
  border-radius: min(var(--smart-search-pill-radius, 10px), 10px);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--smart-search-text);
}

.smart-search__list-item:hover {
  background: var(--smart-search-secondary);
}

.smart-search__list-icon {
  color: var(--smart-search-muted);
  flex-shrink: 0;
  display: flex;
}

/* A class selector beats the UA sheet's `[hidden] { display: none }`, so the
   reserved-but-empty explanation slot has to opt out explicitly. */
.smart-search__notice[hidden] {
  display: none;
}

.smart-search__notice {
  display: flex;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--smart-search-text);
  background: var(--smart-search-secondary);
  border: 0;
  /* An inner surface, so it tracks the panel's shape at a smaller scale. */
  border-radius: var(--smart-search-surface-radius);
}

/* Result grid + cards */
.smart-search__grid {
  display: grid;
  grid-template-columns: repeat(var(--smart-search-columns, 4), minmax(0, 1fr));
  gap: 10px;
  margin-top: 9px;
}

.smart-search__card {
  position: relative;
  min-width: 0;
  aspect-ratio: var(--smart-search-card-aspect, 3 / 4);
  border: 1px solid var(--smart-search-border);
  border-radius: 14px 14px 14px 4px;
  overflow: hidden;
  background: var(--smart-search-secondary);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.smart-search__card:hover {
  transform: translateY(-2px);
}

/* No scrims over the photo. The card is filled with a flat tone sampled from
   the image's own edges, so a contained product sits on a matching field
   instead of a gradient wash; the glass overlay carries its own contrast. */

.smart-search__card-image-link {
  position: absolute;
  inset: 0;
  display: block;
}

.smart-search__card-image {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* The bottom pad is the overlay's own height, so the product is centred in
     the space that's actually visible instead of hiding behind the chrome. */
  padding: 6px 6px var(--smart-search-card-chrome, 50px);
  object-fit: contain;
  object-position: center;
  display: block;
}

.smart-search__card-image--placeholder {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--smart-search-muted);
  font-size: 18px;
}

/* Ported directly from Digital Salesman's current in-panel product card. */
.smart-search__card-overlay {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(18, 18, 20, 0.82);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .smart-search__card-overlay {
    background: rgba(18, 18, 20, 0.28);
    -webkit-backdrop-filter: blur(24px) saturate(85%) brightness(0.55);
    backdrop-filter: blur(24px) saturate(85%) brightness(0.55);
  }
}

.smart-search__card--light .smart-search__card-overlay {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .smart-search__card--light .smart-search__card-overlay {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(24px) saturate(85%) brightness(1.08);
    backdrop-filter: blur(24px) saturate(85%) brightness(1.08);
  }
}

/* Deliberately small: the product name is a label on the photo, not a headline
   competing with it. Smaller type also keeps more titles inside the card and
   off the marquee. */
.smart-search__card-title {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.01em;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}

.smart-search__marquee-inner {
  display: flex;
  gap: 34px;
  width: max-content;
  white-space: nowrap;
}

/* Marquee switched off in the theme editor. Without this the flex track stays
   max-content wide and a long name is cut mid-letter rather than truncated.
   The reduced-motion block below does the same for visitors who ask for it. */
.smart-search__results--portaled[data-marquee="off"] .smart-search__marquee-inner {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smart-search__card-title--marquee {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
}

.smart-search__card-title--marquee .smart-search__marquee-inner {
  animation: smart-search-marquee var(--marquee-duration, 10s) linear infinite;
}

@keyframes smart-search-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-shift, 100%))); }
}

.smart-search__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  gap: 5px;
}

.smart-search__card-price {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-search__card-compare-price {
  margin-left: 4px;
  font-size: 0.82em;
  font-weight: 500;
  opacity: 0.62;
}

.smart-search__add-to-cart {
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  line-height: 1.25;
  padding: 3px 9px;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  background: var(--smart-search-button-bg, rgba(255, 255, 255, 0.95));
  color: var(--smart-search-button-text, #111114);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.smart-search__add-to-cart:hover:not(:disabled) {
  background: var(--smart-search-button-bg, #fff);
}

.smart-search__add-to-cart:disabled {
  padding: 1px 8px;
  font-size: 10px;
  line-height: 1.2;
  cursor: default;
  background: var(--smart-search-button-disabled-bg, transparent);
  color: var(--smart-search-button-disabled-text, rgba(255, 255, 255, 0.7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.smart-search__card--light .smart-search__card-title,
.smart-search__card--light .smart-search__card-price {
  color: #111114;
}

.smart-search__card--light .smart-search__add-to-cart {
  color: var(--smart-search-button-text, #fff);
  background: var(--smart-search-button-bg, #16161a);
}

.smart-search__card--light .smart-search__add-to-cart:hover:not(:disabled) {
  background: var(--smart-search-button-bg, #2c2c31);
}

.smart-search__card--light .smart-search__add-to-cart:disabled {
  background: var(--smart-search-button-disabled-bg, transparent);
  color: var(--smart-search-button-disabled-text, rgba(17, 17, 20, 0.62));
  box-shadow: inset 0 0 0 1px rgba(17, 17, 20, 0.32);
}

.smart-search__card-open {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  border: 0;
  border-radius: 50%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  transition: color 0.15s ease, background-color 0.15s ease;
}

.smart-search__card-open:hover {
  color: #fff;
  background: rgba(16, 16, 18, 0.42);
}

.smart-search__card--light-top .smart-search__card-open {
  color: rgba(17, 17, 20, 0.82);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.85));
}

.smart-search__card--light-top .smart-search__card-open:hover {
  color: #111114;
  background: rgba(255, 255, 255, 0.5);
}

.smart-search__card-open svg {
  width: 14px;
  height: 14px;
}

.smart-search__add-to-cart:focus-visible,
.smart-search__card-open:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.smart-search__card--light .smart-search__add-to-cart:focus-visible,
.smart-search__card--light-top .smart-search__card-open:focus-visible {
  outline-color: #111114;
}

/* Footer: see all results + cart count */
.smart-search__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  padding: 10px 16px 11px;
  font-size: 12.5px;
  border-top: 1px solid var(--smart-search-border);
}

.smart-search__see-all {
  justify-self: start;
  color: var(--smart-search-accent);
  font-weight: 600;
  text-decoration: none;
}

.smart-search__see-all:hover {
  text-decoration: underline;
}

.smart-search__cart-count {
  justify-self: end;
  color: var(--smart-search-muted);
}

.smart-search__powered-by {
  justify-self: center;
  color: var(--smart-search-muted);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  opacity: 0.68;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.smart-search__powered-by:hover {
  color: var(--smart-search-text);
  opacity: 0.82;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.smart-search__powered-by:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--smart-search-accent);
  outline-offset: 2px;
}

.smart-search__question-starters {
  padding: 11px 16px 13px;
  border-top: 1px solid var(--smart-search-border);
}

.smart-search__question-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.smart-search__question-title,
.smart-search__conversation-title {
  color: var(--smart-search-text);
  font-size: 12.5px;
  font-weight: 700;
}

.smart-search__conversation-toggle,
.smart-search__conversation-back {
  color: var(--smart-search-accent);
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.smart-search__question-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.smart-search__question-options--compact {
  padding: 10px 0;
  border-top: 1px solid var(--smart-search-border);
}

/* With no messages yet, the log above this group is an empty stretch and the
   rule reads as a stray line floating mid-column — draw it only once there is
   a conversation to separate. */
.smart-search__conversation-log:not(
    :has(.smart-search__conversation-message)
  )
  + .smart-search__question-options--compact {
  padding-top: 0;
  border-top: 0;
}

/* Question starters are pills; they follow the merchant's suggestion-pill
   settings exactly as the browse-state chips do. */
.smart-search__question-starter {
  padding: var(--smart-search-pill-padding, 6px)
    calc(var(--smart-search-pill-padding, 6px) * 1.5);
  border: 1px solid var(--smart-search-pill-border, var(--smart-search-border));
  border-radius: var(--smart-search-pill-radius, 999px);
  color: var(--smart-search-pill-text, var(--smart-search-text));
  background: var(--smart-search-pill-bg, var(--smart-search-secondary));
  font-size: var(--smart-search-pill-text-size, 11.5px);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.smart-search__question-starter:hover,
.smart-search__question-starter:focus-visible {
  border-color: color-mix(in srgb, var(--smart-search-accent) 48%, var(--smart-search-bg));
  outline: none;
}

.smart-search__results--conversation-mode {
  display: flex;
  flex-direction: column;
  height: var(--smart-search-panel-max, 62vh);
}

.smart-search__workspace {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr);
  flex: 1;
  min-height: 0;
  animation: smart-search-workspace-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes smart-search-workspace-in {
  from {
    opacity: 0.82;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.smart-search__conversation-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 12px;
  border-right: 1px solid var(--smart-search-border);
}

.smart-search__conversation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 11px;
}

.smart-search__conversation-context,
.smart-search__conversation-empty {
  margin-top: 2px;
  color: var(--smart-search-muted);
  font-size: 11px;
  line-height: 1.35;
}

.smart-search__conversation-log {
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 70px;
  gap: 7px;
  padding: 3px 2px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Opening line from the assistant about the fresh results: a chat bubble in
   the assistant's voice, unlike the muted status text of the other empty
   states. Not a .smart-search__conversation-message — the conversation
   stylesheet strips assistant messages down for answer cards. */
.smart-search__conversation-intro {
  width: fit-content;
  max-width: 92%;
  padding: 8px 11px;
  border-radius: var(--smart-search-surface-radius);
  border-bottom-left-radius: min(var(--smart-search-surface-radius), 4px);
  color: var(--smart-search-text);
  background: var(--smart-search-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}

.smart-search__conversation-intro-icon {
  margin-right: 5px;
  color: var(--smart-search-accent);
}

.smart-search__conversation-message {
  width: fit-content;
  max-width: 92%;
  padding: 7px 10px;
  border-radius: var(--smart-search-surface-radius);
  color: var(--smart-search-text);
  background: var(--smart-search-secondary);
  font-size: 12.5px;
  line-height: 1.4;
}

.smart-search__conversation-message--buyer {
  justify-self: end;
  color: var(--smart-search-accent-text);
  background: var(--smart-search-accent);
  border-bottom-right-radius: min(var(--smart-search-surface-radius), 4px);
}

.smart-search__conversation-message--assistant {
  border-bottom-left-radius: min(var(--smart-search-surface-radius), 4px);
}

.smart-search__conversation-label {
  display: block;
  margin: 9px 0 6px;
  color: var(--smart-search-muted);
  font-size: 11.5px;
  font-weight: 650;
}

.smart-search__conversation-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.smart-search__products-pane {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--smart-search-text) 24%, transparent)
    transparent;
}

.smart-search__products-pane::-webkit-scrollbar {
  width: 8px;
}

.smart-search__products-pane::-webkit-scrollbar-track {
  background: transparent;
}

.smart-search__products-pane::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--smart-search-text) 24%, transparent);
  background-clip: padding-box;
}

.smart-search__products-pane .smart-search__grid {
  --smart-search-columns: 3;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smart-search__results-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 20px;
  gap: 8px;
}

.smart-search__result-filter {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: min(240px, 72%);
  gap: 4px;
  margin: 0;
  padding: 3px 5px 3px 8px;
  border-radius: var(--smart-search-pill-radius, 999px);
  background: var(--smart-search-pill-bg, var(--smart-search-secondary));
}

.smart-search__result-filter-label {
  overflow: hidden;
  color: var(--smart-search-text);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smart-search__result-filter-clear {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--smart-search-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.smart-search__result-filter-clear:hover,
.smart-search__result-filter-clear:focus-visible {
  color: var(--smart-search-text);
  background: color-mix(
    in srgb,
    var(--smart-search-text) 8%,
    transparent
  );
  outline: none;
}

.smart-search__grid--filtered {
  animation: smart-search-filter-results-in 0.18s ease-out;
}

@keyframes smart-search-filter-results-in {
  from {
    opacity: 0.72;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The chat input and send button are controls, so they take the same shape as
   the search box: the takeover's manual radius when set, else the block's
   explicit shape, else the theme-derived control radius. */
.smart-search__conversation-input {
  min-width: 0;
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 0 !important;
  border-radius: var(
    --smart-search-takeover-bar-radius,
    var(
      --smart-search-field-radius,
      var(--smart-search-control-radius-auto, 999px)
    )
  );
  outline: 1px solid var(--smart-search-border) !important;
  color: var(--smart-search-text) !important;
  background: var(--smart-search-secondary) !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 12.5px;
}

.smart-search__conversation-input:focus {
  outline: 2px solid color-mix(in srgb, var(--smart-search-accent) 42%, var(--smart-search-bg)) !important;
}

.smart-search__conversation-send {
  min-width: 54px;
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: var(
    --smart-search-takeover-bar-radius,
    var(
      --smart-search-field-radius,
      var(--smart-search-control-radius-auto, 999px)
    )
  );
  color: var(--smart-search-accent-text);
  background: var(--smart-search-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none !important;
}

.smart-search__conversation-send:disabled,
.smart-search__conversation-input:disabled {
  cursor: wait;
  opacity: 0.62;
}

.smart-search__empty {
  padding: 16px;
  color: var(--smart-search-muted);
  font-size: 13.5px;
}

/* Loading skeleton */
.smart-search__skeleton-grid {
  display: grid;
  grid-template-columns: repeat(var(--smart-search-columns, 4), minmax(0, 1fr));
  gap: 10px;
  margin-top: 9px;
}

.smart-search__skeleton-card {
  position: relative;
  aspect-ratio: var(--smart-search-card-aspect, 3 / 4);
  border: 0;
  border-radius: 14px 14px 14px 4px;
  overflow: hidden;
  background: var(--smart-search-secondary);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4em;
  padding-bottom: 0.5em;
}

.smart-search__skeleton-image,
.smart-search__skeleton-line {
  background: linear-gradient(90deg, var(--smart-search-secondary), var(--smart-search-bg), var(--smart-search-secondary));
  background-size: 200% 100%;
  animation: smart-search-shimmer 1.3s linear infinite;
}

.smart-search__skeleton-image {
  position: absolute;
  inset: 0;
}

.smart-search__skeleton-line {
  height: 0.6em;
  margin: 0 0.6em;
  border-radius: 4px;
  position: relative;
}

.smart-search__skeleton-line--short {
  width: 60%;
}

@keyframes smart-search-shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Column count is measured in JS from the panel's real width, so a phone-width
   panel only needs tighter gutters here. */
@media (max-width: 520px) {
  .smart-search__section {
    padding: 10px 12px 12px;
  }

  .smart-search__notice {
    margin: 10px 12px 0;
  }

  .smart-search__footer {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 4px;
    padding: 9px 12px 10px;
  }

  .smart-search__powered-by {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .smart-search__question-starters {
    padding: 9px 12px 10px;
  }
}

/* Phone assistant surfaces. Desktop keeps the side-by-side conversation
   pane; on phones the search bar itself carries the conversation, supported
   by three slim pieces enabled in the breakpoint below. */
.smart-search__mobile-context,
.smart-search__answer-strip,
.smart-search__answer-sheet {
  display: none;
}

.smart-search__field--thinking .smart-search__icon--ai {
  animation: smart-search-thinking 1s ease-in-out infinite;
}

@keyframes smart-search-thinking {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

@media (max-width: 700px) {
  /* The bar is the assistant: no chat pane, the grid takes the whole panel.
     The query is pinned inside the bar; the rest of the conversation context
     lives in a horizontally scrollable chip row (refinements + question
     starters) and the assistant's latest reply in a strip that expands into
     a bottom sheet. */
  .smart-search__conversation-pane {
    display: none;
  }

  .smart-search__workspace {
    display: flex;
    flex-direction: column;
  }

  .smart-search__products-pane {
    flex: 1 1 0;
    min-height: 0;
  }

  /* Three smaller cards a row, so a phone shows about twice as many
     products above the fold. Below 360px they'd be too cramped to read. */
  .smart-search__products-pane .smart-search__grid {
    --smart-search-columns: 3;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  /* Too narrow for a scrolling title: wrap to two lines instead. The script
     also skips the marquee setup on phones. */
  .smart-search__results--portaled .smart-search__card-title {
    white-space: normal;
  }

  .smart-search__results--portaled
    .smart-search__card-title
    .smart-search__marquee-inner {
    display: -webkit-box;
    width: auto;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .smart-search__mobile-context {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 12px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .smart-search__mobile-context::-webkit-scrollbar {
    display: none;
  }

  .smart-search__mobile-context > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Pill visuals come from .smart-search__question-starter (shared class in
     the markup) so merchant pill settings track; only the × layout differs. */
  .smart-search__mobile-refinement {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .smart-search__answer-strip-region {
    flex-shrink: 0;
  }

  .smart-search__mobile-chip-x {
    font-size: 1.1em;
    line-height: 1;
    opacity: 0.8;
  }

  /* The assistant's line is the one tinted box in the panel, so it stands
     apart from the outlined chips and cards around it. */
  .smart-search__answer-strip {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex-shrink: 0;
    margin: 6px 12px 2px;
    padding: 9px 11px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--smart-search-surface-radius);
    color: var(--smart-search-text);
    background: color-mix(
      in srgb,
      var(--smart-search-accent) 8%,
      var(--smart-search-bg)
    );
    font: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
  }

  .smart-search__answer-strip--expandable {
    cursor: pointer;
  }

  .smart-search__answer-strip-icon {
    flex-shrink: 0;
    color: var(--smart-search-accent);
  }

  .smart-search__answer-strip-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
    overflow: hidden;
  }

  .smart-search__answer-strip-more {
    flex-shrink: 0;
    color: var(--smart-search-muted);
  }

  .smart-search__answer-strip--answer .smart-search__answer-strip-text {
    font-weight: 600;
  }

  .smart-search__answer-strip--pending {
    color: var(--smart-search-muted);
  }

  /* A light sweep while the answer is on its way, so the shopper is already
     looking at the right box when it lands. */
  .smart-search__answer-strip--pending::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      transparent 20%,
      color-mix(in srgb, var(--smart-search-bg) 75%, transparent) 45%,
      transparent 70%
    );
    transform: translateX(-100%);
    animation: smart-search-answer-shimmer 1.15s ease-in-out infinite;
    pointer-events: none;
  }

  .smart-search__answer-caret {
    display: inline-block;
    width: 0.5em;
    height: 1.05em;
    margin-left: 1px;
    vertical-align: -0.15em;
    background: var(--smart-search-accent);
    animation: smart-search-answer-caret 0.8s steps(1) infinite;
  }

  .smart-search__answer-strip--pending .smart-search__answer-strip-icon {
    animation: smart-search-thinking 1s ease-in-out infinite;
  }

  .smart-search__answer-sheet:not([hidden]) {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 6;
  }

  .smart-search__answer-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, #000 32%, transparent);
    cursor: pointer;
  }

  .smart-search__answer-sheet-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 78%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--smart-search-border);
    border-radius: var(--smart-search-surface-radius)
      var(--smart-search-surface-radius) 0 0;
    background: var(--smart-search-bg);
    animation: smart-search-sheet-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .smart-search__answer-sheet-handle {
    width: 36px;
    height: 4px;
    margin: 4px auto 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--smart-search-text) 22%, transparent);
  }

  /* Answer sheet: kicker and close, what was asked, the answer in large
     type, then the picks and any caveat. */
  .smart-search__sheet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
  }

  .smart-search__sheet-kicker {
    color: var(--smart-search-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .smart-search__sheet-close {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--smart-search-text);
    background: color-mix(
      in srgb,
      var(--smart-search-accent) 8%,
      var(--smart-search-bg)
    );
    cursor: pointer;
  }

  .smart-search__sheet-asked {
    margin: 0 0 6px;
    color: var(--smart-search-muted);
    font-size: 12px;
    line-height: 1.4;
  }

  .smart-search__sheet-headline {
    margin: 0 0 14px;
    color: var(--smart-search-text);
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .smart-search__sheet-text {
    margin: 0 0 14px;
    color: var(--smart-search-text);
    font-size: 14px;
    line-height: 1.5;
  }

  .smart-search__sheet-picks {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid
      color-mix(in srgb, var(--smart-search-text) 14%, transparent);
    border-radius: var(--smart-search-surface-radius);
  }

  .smart-search__sheet-pick {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
  }

  .smart-search__sheet-pick + .smart-search__sheet-pick {
    border-top: 1px solid
      color-mix(in srgb, var(--smart-search-text) 14%, transparent);
  }

  .smart-search__sheet-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: var(--smart-search-surface-radius);
    background: var(--smart-search-secondary);
  }

  .smart-search__sheet-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .smart-search__sheet-rank {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    color: var(--smart-search-accent-text, #fff);
    background: var(--smart-search-accent);
    font-size: 10px;
    font-weight: 700;
  }

  .smart-search__sheet-pick-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .smart-search__sheet-pick-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--smart-search-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .smart-search__sheet-pick-reason {
    color: var(--smart-search-muted);
    font-size: 12px;
    line-height: 1.35;
  }

  .smart-search__sheet-pick-price {
    margin-top: 2px;
    color: var(--smart-search-text);
    font-size: 12.5px;
    font-weight: 700;
  }

  .smart-search__sheet-pick-price s {
    color: var(--smart-search-muted);
    font-weight: 400;
  }

  .smart-search__sheet-pick-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 76px;
  }

  .smart-search__sheet-view {
    min-height: 32px;
    padding: 6px 8px;
    border: 1px solid var(--smart-search-text);
    border-radius: var(--smart-search-chip-radius);
    color: var(--smart-search-text);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .smart-search__sheet-pick-actions .smart-search__add-to-cart {
    width: 100%;
    min-height: 32px;
    margin: 0;
  }

  .smart-search__sheet-note {
    display: flex;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid
      color-mix(in srgb, var(--smart-search-text) 14%, transparent);
    color: var(--smart-search-muted);
    font-size: 12px;
    line-height: 1.45;
  }

  .smart-search__sheet-note-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }
}

@keyframes smart-search-sheet-up {
  from {
    transform: translateY(24px);
    opacity: 0.6;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smart-search__field--portaled,
  .smart-search__results--portaled,
  .smart-search__card,
  .smart-search__card-image,
  .smart-search__add-to-cart,
  .smart-search__chip-trend-arrow,
  .smart-search__marquee-inner {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .smart-search__workspace {
    animation: none !important;
  }

  .smart-search__answer-sheet-body,
  .smart-search__card--spotlight,
  .smart-search__answer-strip--pending::after,
  .smart-search__answer-caret,
  .smart-search__answer-strip--pending .smart-search__answer-strip-icon,
  .smart-search__field--thinking .smart-search__icon--ai {
    animation: none !important;
  }

  .smart-search__grid--filtered {
    animation: none !important;
  }

  .smart-search__card-title--marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .smart-search__card-title--marquee .smart-search__marquee-inner {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  [data-smart-search-duplicate] {
    display: none;
  }
}

@media (max-width: 359px) {
  .smart-search__products-pane .smart-search__grid {
    --smart-search-columns: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Pinned query (phones). Once a search is committed its query becomes a
   chip at the start of the bar and the input asks about those results.
   Focusing the bar collapses the chip to its pin icon so the question has
   the room; the label slides back out when the keyboard goes away. All
   these controls are created by the script and only shown on phones. */
.smart-search__pin[hidden],
.smart-search__send[hidden],
.smart-search__ask-cancel[hidden],
.smart-search__pin-tip[hidden] {
  display: none !important;
}

.smart-search__pin {
  position: absolute;
  top: 50%;
  left: 7px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 32px;
  padding: 0 0 0 9px;
  border-radius: var(--smart-search-chip-radius);
  color: var(--smart-search-accent-text);
  background: var(--smart-search-accent);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-50%);
  -webkit-tap-highlight-color: transparent;
  transition:
    padding 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.2s ease;
}

.smart-search__pin > svg {
  flex-shrink: 0;
}

.smart-search__pin-label {
  display: inline-block;
  max-width: var(--smart-search-pin-label-width, 120px);
  margin-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    max-width 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    margin 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.18s ease;
}

.smart-search__pin-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 32px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: none;
  opacity: 0.8;
  cursor: pointer;
  transition:
    width 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.15s ease;
}

/* Collapsed to the pin icon while asking (and for the first frame of a new
   pin, so the label grows out of it). */
.smart-search__field--asking .smart-search__pin,
.smart-search__field--pin-entering .smart-search__pin {
  padding-right: 9px;
}

.smart-search__field--asking .smart-search__pin-label,
.smart-search__field--pin-entering .smart-search__pin-label {
  max-width: 0;
  margin-left: 0;
  opacity: 0;
}

.smart-search__field--asking .smart-search__pin-clear,
.smart-search__field--pin-entering .smart-search__pin-clear {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

.smart-search__pin--armed {
  box-shadow:
    0 0 0 2px var(--smart-search-bg),
    0 0 0 4px #e5484d;
}

.smart-search__pin--pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--smart-search-chip-radius) + 2px);
  pointer-events: none;
  animation: smart-search-pin-pulse 1.1s ease-out 2;
}

@keyframes smart-search-pin-pulse {
  from {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--smart-search-accent) 55%, transparent);
  }
  to {
    box-shadow: 0 0 0 12px transparent;
  }
}

/* The input's text starts after the pin: 7px inset + the chip (56px of
   chrome plus its label) + 8px gap; 47px when collapsed to the icon. */
.smart-search__field--pinned .smart-search__input {
  padding-left: calc(71px + var(--smart-search-pin-label-width, 120px));
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    padding 0.3s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.smart-search__field--pinned.smart-search__field--asking .smart-search__input,
.smart-search__field--pinned.smart-search__field--pin-entering
  .smart-search__input {
  padding-left: 47px;
}

.smart-search__field--pinned .smart-search__icon--ai,
.smart-search__field--pinned .smart-search__icon--search {
  opacity: 0;
}

/* While asking, the bar shortens to make room for Cancel outside it, the
   way native search fields do, and the takeover's × steps aside so the only
   exits from typing are Cancel, the keyboard's own Done, and the dimmed
   "Back to results" strip below. */
.smart-search__field--asking .smart-search__input {
  width: calc(100% - 70px);
}

.smart-search__field--asking .smart-search__takeover-close {
  opacity: 0;
  pointer-events: none;
}

.smart-search__ask-cancel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 66px;
  margin: 0;
  padding: 0 4px 0 0;
  border: 0;
  color: var(--smart-search-accent);
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.smart-search__send {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--smart-search-accent-text);
  background: var(--smart-search-accent);
  cursor: pointer;
  transform: translateY(-50%);
  animation: smart-search-send-in 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.smart-search__field--takeover .smart-search__send {
  right: 52px;
}

.smart-search__field--asking .smart-search__send,
.smart-search__field--takeover.smart-search__field--asking .smart-search__send {
  right: 76px;
}

.smart-search__field--has-draft .smart-search__input {
  padding-right: 52px;
}

.smart-search__field--takeover.smart-search__field--has-draft
  .smart-search__input {
  padding-right: 92px;
}

.smart-search__field--asking.smart-search__field--has-draft
  .smart-search__input,
.smart-search__field--takeover.smart-search__field--asking.smart-search__field--has-draft
  .smart-search__input {
  padding-right: 46px;
}

@keyframes smart-search-send-in {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.4);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

/* Tip under the pin, positioned inside the results panel above everything
   else there. Deliberately dark and theme-independent: it's a one-off
   system hint, not part of the store's design. */
.smart-search__pin-tip {
  position: absolute;
  z-index: 8;
  box-sizing: border-box;
  padding: 12px 14px 10px;
  border-radius: var(--smart-search-surface-radius);
  color: #fff;
  background: #17191e;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  transform-origin: var(--smart-search-pin-tip-arrow, 24px) -8px;
  animation: smart-search-pin-tip-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.smart-search__pin-tip-arrow {
  position: absolute;
  top: -6px;
  left: var(--smart-search-pin-tip-arrow, 24px);
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: #17191e;
  transform: rotate(45deg);
}

.smart-search__pin-tip-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.smart-search__pin-tip-text {
  margin: 0;
  color: #d5d7dd;
  font-size: 13.5px;
}

.smart-search__pin-tip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.smart-search__pin-tip-try {
  min-width: 0;
  margin: 0;
  padding: 7px 11px;
  overflow: hidden;
  border: 1px solid #3a3e48;
  border-radius: var(--smart-search-chip-radius);
  color: #fff;
  background: #2b2e36;
  font: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.smart-search__pin-tip-try[hidden] {
  display: none;
}

.smart-search__pin-tip-ok,
.smart-search__answer-tip-ok {
  flex-shrink: 0;
  margin: 0 0 0 auto;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--smart-search-chip-radius);
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

@keyframes smart-search-pin-tip-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* One corner radius per kind of shape, taken from the merchant's block
   settings or, with theme matching on, from the theme. Boxes inside the panel
   (answer strip, notices, tips, the typing panel) follow the product cards;
   chips and pill-shaped buttons follow the pills. Circular icon buttons stay
   circular. */
.smart-search__field,
.smart-search__results {
  --smart-search-surface-radius: var(
    --smart-search-card-radius,
    var(--smart-search-card-radius-auto, 14px)
  );
  --smart-search-chip-radius: var(--smart-search-pill-radius, 999px);
}

/* Read by screen readers, invisible on screen. */
.smart-search__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop never renders the phone-only surfaces below, but keep them out of
   layout there regardless. */
.smart-search__ask-layer,
.smart-search__answer-tip {
  display: none;
}

@media (max-width: 700px) {
  .smart-search__ask-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 2px;
    color: var(--smart-search-accent);
    font-size: 13px;
    font-weight: 700;
  }

  /* Callout attached under the answer strip. It's in the flow, so it pushes
     the cards down instead of covering the ✦ picks it points at. */
  .smart-search__answer-tip {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 12px;
    margin: 10px 12px 4px;
    padding: 8px 8px 8px 13px;
    border-radius: var(--smart-search-surface-radius);
    color: #fff;
    background: #17191e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      sans-serif;
    font-size: 13.5px;
    font-weight: 600;
  }

  .smart-search__answer-tip::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 22px;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #17191e;
    transform: rotate(45deg);
  }

  .smart-search__answer-tip--enter {
    overflow: hidden;
    animation: smart-search-answer-tip-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .smart-search__answer-tip--leaving {
    overflow: hidden;
    pointer-events: none;
    animation: smart-search-answer-tip-out 0.26s cubic-bezier(0.32, 0.72, 0, 1)
      forwards;
  }

  /* Dims the whole results panel, down behind the keyboard and Safari's
     toolbars, but lays out its controls in what the keyboard leaves visible
     (--smart-search-ask-height): the panel of the pinned query and suggested
     questions on top, and below it a strip that takes the shopper back to
     the results. */
  .smart-search__ask-layer {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, #000 36%, transparent);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0.2s;
  }

  .smart-search__results--asking .smart-search__ask-layer {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease;
  }

  /* The part of the layer hidden by the keyboard: dimmed, nothing in it. */
  .smart-search__ask-layer::after {
    flex: 0 0 calc(100% - var(--smart-search-ask-height, 100%));
    content: "";
  }

  .smart-search__ask-panel {
    flex: 0 1 auto;
    min-height: 0;
    /* The panel gives way (and scrolls) before the strip below it does, so
       "Back to results" stays reachable even on a very short viewport. */
    max-height: calc(var(--smart-search-ask-height, 100%) - 56px);
    padding: 4px 0 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 var(--smart-search-surface-radius)
      var(--smart-search-surface-radius);
    background: var(--smart-search-bg);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  }

  .smart-search__ask-context {
    display: flex;
    gap: 8px;
    margin: 8px 12px 4px;
    padding: 9px 11px;
    border-radius: var(--smart-search-surface-radius);
    color: var(--smart-search-text);
    background: var(--smart-search-secondary);
    font-size: 13.5px;
    line-height: 1.35;
  }

  .smart-search__ask-context > svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--smart-search-accent);
  }

  .smart-search__ask-context strong {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 650;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .smart-search__ask-heading {
    margin: 10px 16px 2px;
    color: var(--smart-search-muted);
    font-size: 12px;
    font-weight: 600;
  }

  .smart-search__ask-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    color: var(--smart-search-text);
    background: none;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }

  .smart-search__ask-suggestion > span {
    flex-shrink: 0;
    color: var(--smart-search-accent);
  }

  .smart-search__ask-away {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: center;
    min-height: 56px;
    margin: 0;
    padding: 0 0 12px;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .smart-search__ask-away-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--smart-search-chip-radius);
    color: #fff;
    background: rgba(23, 25, 30, 0.82);
    font-size: 13.5px;
    font-weight: 600;
  }
}

/* "This one": two clear rings after an answer lands or "View" is tapped. */
.smart-search__card--spotlight {
  animation: smart-search-card-spotlight 1.4s ease-out 2;
}

@keyframes smart-search-card-spotlight {
  0% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--smart-search-accent) 65%, transparent);
  }
  70% {
    box-shadow: 0 0 0 12px transparent;
  }
  100% {
    box-shadow: 0 0 0 12px transparent;
  }
}

@keyframes smart-search-answer-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes smart-search-answer-caret {
  50% {
    opacity: 0;
  }
}

@keyframes smart-search-answer-tip-in {
  from {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  to {
    max-height: 60px;
    opacity: 1;
  }
}

@keyframes smart-search-answer-tip-out {
  from {
    max-height: 60px;
    opacity: 1;
  }
  to {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}

/* Reduced motion keeps every state change but drops the movement: the pin
   swaps between label and icon, and the tips appear in place. */
@media (prefers-reduced-motion: reduce) {
  .smart-search__pin,
  .smart-search__pin-label,
  .smart-search__pin-clear,
  .smart-search__field--pinned .smart-search__input,
  .smart-search__ask-layer {
    transition: none !important;
  }

  .smart-search__pin--pulse::after,
  .smart-search__send,
  .smart-search__pin-tip,
  .smart-search__answer-tip--enter {
    animation: none !important;
  }
}