/* Shop AI search strip (TODO 00001.5.14). FINAL design/shop/inspiration/sections/ai-search/r3/v3.png.
   Full width ai-surface band between two 1px ai hairlines (section 7 exception, no side edges), directly under the
   title band (CARRY-NOTES 9). Label AI SEARCH behind a 1px divider; the query in a white field with a 1px ai edge,
   each understood phrase underlined; the query leader (section 7) drops from each phrase (comma excluded,
   CARRY-NOTES 10) to its chip; chips name the facet in label caps over the value. Static until 00001.5.20.
   Leaders need the phrase and chip columns side by side: from 1360 only; below, the leaders are dropped and the
   chips wrap (section 7: dropped rather than bent). */
.p-shop-ai-search {
  box-sizing: border-box; margin-top: var(--wp--preset--spacing--90);
  background: var(--wp--preset--color--ai-surface);
  border-top: 1px solid var(--wp--preset--color--ai); border-bottom: 1px solid var(--wp--preset--color--ai);
  padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter--desktop);
}
.p-shop-ai-search *, .p-shop-ai-search *::before, .p-shop-ai-search *::after { box-sizing: border-box; }
.p-shop-ai-search__inner {
  max-width: var(--wp--custom--layout--wide); margin-inline: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--wp--preset--spacing--60);
}
.p-shop-ai-search__label {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); align-self: start;
  min-height: var(--wp--custom--control); margin: 0; padding-right: var(--wp--preset--spacing--60);
  border-right: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-shop-ai-search__label .p-icon { color: var(--wp--preset--color--ai); }
.p-shop-ai-search__q { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--40); }
.p-shop-ai-search__box { display: none; }
.p-shop-ai-search__field {
  position: relative; flex: 1 1 24rem; min-height: var(--wp--custom--control);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai);
  border-radius: var(--wp--custom--radius--default);
}
.p-shop-ai-search__field input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; color: transparent; caret-color: transparent; font: inherit; cursor: default;
  border-radius: var(--wp--custom--radius--default);
}
.p-shop-ai-search__field input:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: var(--wp--custom--focus--offset);
}
.p-shop-ai-search__phrases { position: relative; pointer-events: none; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body-l); line-height: 1.5; }
.p-shop-ai-search__phrase { white-space: nowrap; }
.p-shop-ai-search__phrase + .p-shop-ai-search__phrase { margin-left: var(--wp--preset--spacing--30); }
.p-shop-ai-search__phrase u { text-decoration: underline 1px var(--wp--preset--color--ai); text-underline-offset: 6px; }
.p-shop-ai-search__leader { display: none; }
.p-shop-ai-search__chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; flex-basis: 100%; }
.p-shop-ai-search__chip {
  display: grid; grid-template-columns: auto auto; column-gap: var(--wp--preset--spacing--40); align-items: center;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--default); white-space: nowrap;
}
.p-shop-ai-search__facet {
  grid-column: 1; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--label);
  font-weight: var(--wp--custom--font-weight--label); letter-spacing: var(--wp--custom--letter-spacing--label);
  line-height: 1.3; text-transform: uppercase;
}
.p-shop-ai-search__value { grid-column: 1; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.5; }
.p-shop-ai-search__chip .p-icon { grid-column: 2; grid-row: 1 / 3; color: var(--wp--preset--color--slate); }
.p-shop-ai-search__clear {
  color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--body);
  text-decoration: underline 1px; text-underline-offset: 3px; cursor: default;
}
.p-shop-ai-search__find {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--40);
  min-height: var(--wp--custom--control); margin: 0; padding: 0 var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--ai); color: var(--wp--preset--color--white); border: 0;
  border-radius: var(--wp--custom--radius--default); font-family: inherit; font-size: var(--wp--preset--font-size--button);
  font-weight: var(--wp--custom--font-weight--button); letter-spacing: var(--wp--custom--letter-spacing--button);
  line-height: 1; white-space: nowrap; cursor: default;
}
.p-shop-ai-search__find:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: var(--wp--custom--focus--offset);
}
.p-shop-ai-search__source {
  grid-column: 2; margin: var(--wp--preset--spacing--60) 0 0; color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--small); line-height: 1.5;
}
/* Aligned layout: phrase, leader and chip share one grid column each. */
@media (min-width: 1360px) {
  .p-shop-ai-search__q {
    display: grid; grid-template-columns: repeat(5, auto) minmax(0, 1fr) auto;
    grid-template-rows: var(--wp--custom--control) var(--wp--preset--spacing--70) auto;
    column-gap: var(--wp--preset--spacing--40); row-gap: 0; align-items: center;
  }
  .p-shop-ai-search__box {
    display: block; grid-row: 1; grid-column: 1 / 7; align-self: stretch;
    background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai);
    border-radius: var(--wp--custom--radius--default);
  }
  .p-shop-ai-search__field, .p-shop-ai-search__phrases, .p-shop-ai-search__chips { display: contents; }
  .p-shop-ai-search__field input { position: relative; grid-row: 1; grid-column: 1 / 7; }
  .p-shop-ai-search__phrase {
    grid-row: 1; grid-column: var(--col); justify-self: center; position: relative; z-index: 1;
    margin: 0 !important; pointer-events: none; color: var(--wp--preset--color--ink);
    font-size: var(--wp--preset--font-size--body-l); line-height: 1.5;
  }
  .p-shop-ai-search__comma { position: absolute; left: 100%; }
  .p-shop-ai-search__leader {
    display: block; position: relative; grid-row: 2; grid-column: var(--col); justify-self: center; align-self: stretch;
    width: 1px; background: var(--wp--preset--color--ai);
  }
  .p-shop-ai-search__leader::before, .p-shop-ai-search__leader::after {
    content: ""; position: absolute; left: -1.5px; width: 4px; height: 4px; border-radius: 50%;
    background: var(--wp--preset--color--ai);
  }
  .p-shop-ai-search__leader::before { top: -2px; }
  .p-shop-ai-search__leader::after { bottom: -2px; }
  .p-shop-ai-search__chip { grid-row: 3; grid-column: var(--col); justify-self: center; }
  .p-shop-ai-search__clear {
    grid-row: 3; grid-column: 6 / 8; justify-self: start;
    padding-left: var(--wp--preset--spacing--60); border-left: 1px solid var(--wp--preset--color--line);
    line-height: var(--wp--custom--control);
  }
  .p-shop-ai-search__find { grid-row: 1; grid-column: 7; }
}
@media (max-width: 991.98px) {
  .p-shop-ai-search { padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter--tablet); }
  .p-shop-ai-search__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--40); }
  .p-shop-ai-search__label { min-height: 0; padding-right: 0; border-right: 0; }
  .p-shop-ai-search__source { grid-column: 1; margin-top: var(--wp--preset--spacing--30); }
}
@media (max-width: 599.98px) {
  .p-shop-ai-search { margin-top: var(--wp--preset--spacing--80); padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter--phone); }
  .p-shop-ai-search__find { flex: 1 1 100%; }
  .p-shop-ai-search__field { flex-basis: 100%; }
}