/**
 * Frodig Search storefront UI (replaces FiboSearch Pirx skin).
 * Uses theme.json CSS custom properties.
 */

.frodig-search,
.frodig-search *,
.frodig-search *::before,
.frodig-search *::after {
  box-sizing: border-box;
}

.frodig-search {
  --frodig-search-surface: var(--wp--preset--color--parchment, #f9f5e5);
  --frodig-search-max-width: 480px;
  --frodig-search-panel-height: min(70vh, 660px);
  --frodig-search-panel-min-height: 320px;
  --frodig-search-details-width: 300px;
  --frodig-search-scope-thumb: 70px;
  position: relative;
  width: 100%;
  max-width: var(--frodig-search-max-width);
  z-index: 100;
}

.frodig-search__open {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--organic-green);
  cursor: pointer;
}

.frodig-search__open-icon,
.frodig-search__submit-icon {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  box-sizing: border-box;
}

.frodig-search__open-icon::after,
.frodig-search__submit-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 2px;
  background: currentColor;
  right: -5px;
  bottom: -1px;
  transform: rotate(45deg);
}

.frodig-search__shell {
  position: relative;
  z-index: 100;
  width: 100%;
}

.frodig-search__form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
}

.frodig-search__input {
  width: 100%;
  height: auto;
  min-height: 0;
  /* Matched to staging Fibo #dgwt-wcas-search-input-1 (Pirx + theme). */
  padding: 13px 24px 13px 48px;
  /* No layout border — focus ring is box-shadow (does not change box size). */
  border: 0;
  border-radius: 10px;
  background: var(--frodig-search-surface);
  color: var(--wp--preset--color--forest-night);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Native clear hidden — custom .frodig-search__close exits search mode. */
.frodig-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.frodig-search__input::placeholder {
  text-align: center;
  /* Optical center vs left magnifier when close is hidden. */
  padding-right: 20px;
  font-family: var(--wp--preset--font-family--bogart);
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: var(--wp--preset--color--organic-green);
  opacity: 1;
}

/* Close control adds input padding-right — drop placeholder offset so it stays centered. */
.frodig-search.is-open .frodig-search__input::placeholder,
.frodig-search.is-focused .frodig-search__input::placeholder {
  padding-right: 0;
}

.frodig-search.is-open .frodig-search__input,
.frodig-search.is-focused .frodig-search__input {
  /* Extra right padding clears the close control inside the pill. */
  padding-right: 44px;
  background-color: var(--frodig-search-surface);
  box-shadow: 0 0 0 1px var(--wp--preset--color--organic-green);
}

/*
 * Joined dropdown: no element borders — cream surfaces meet flush.
 * Join is border-radius only (input bottom / list top squared).
 * Drop the focus ring while open so it cannot paint a seam at the join.
 */
.frodig-search.is-dropdown-open .frodig-search__form,
.frodig-search.is-dropdown-open .frodig-search__input,
.frodig-search.is-dropdown-open .frodig-search__list {
  width: 100%;
  max-width: 100%;
}

.frodig-search.is-dropdown-open .frodig-search__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--frodig-search-surface);
  box-shadow: none;
}

.frodig-search.is-dropdown-open .frodig-search__panel {
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: none;
}

.frodig-search.is-dropdown-open .frodig-search__list {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
  /* No drop-shadow here — blur paints a hairline seam across the flush join. */
  box-shadow: none;
}

.frodig-search.is-dropdown-open
  .frodig-search__panel:has(.frodig-search__details:not([hidden]))
  .frodig-search__list {
  border-radius: 0 0 0 4px;
}

.frodig-search.is-dropdown-open .frodig-search__details {
  border-top-left-radius: 0;
  /* Shadow only to the right/bottom so it cannot bleed into the input join. */
  box-shadow: 8px 8px 28px rgba(33, 45, 32, 0.12);
}

/* Hover — background only (mouseenter also toggles .is-active in JS). */
.frodig-search__suggestion--product:hover,
.frodig-search__suggestion--scope:hover,
.frodig-search__suggestion--see-all:hover,
.frodig-search__suggestion--history:hover {
  background-color: var(--wp--preset--color--white);
  box-shadow: none;
}

/* Preview / keyboard row highlight — white background (.is-active from JS). */
.frodig-search__suggestion--product.is-active,
.frodig-search__suggestion--scope.is-active,
.frodig-search__suggestion--see-all.is-active,
.frodig-search__suggestion--history.is-active {
  background-color: var(--wp--preset--color--white);
}

/* Green ring only when JS sets .is-keyboard-active (arrow keys / Tab focus). */
.frodig-search__suggestion--product.is-keyboard-active,
.frodig-search__suggestion--scope.is-keyboard-active,
.frodig-search__suggestion--see-all.is-keyboard-active,
.frodig-search__suggestion--history.is-keyboard-active {
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--organic-green, #646556);
}

.frodig-search__suggestion--product.is-keyboard-active:hover,
.frodig-search__suggestion--scope.is-keyboard-active:hover,
.frodig-search__suggestion--see-all.is-keyboard-active:hover,
.frodig-search__suggestion--history.is-keyboard-active:hover {
  box-shadow: none;
}

/*
 * Tab focus on suggestion buttons — ring via :focus-visible only (not mouse :focus).
 * Inset box-shadow stays inside the row so overflow:auto on .frodig-search__list
 * does not clip left/bottom.
 */
.frodig-search__suggestion--product:focus,
.frodig-search__suggestion--scope:focus,
.frodig-search__suggestion--see-all:focus,
.frodig-search__suggestion--history:focus {
  outline: none !important;
}

.frodig-search__suggestion--product:focus-visible,
.frodig-search__suggestion--scope:focus-visible,
.frodig-search__suggestion--see-all:focus-visible,
.frodig-search__suggestion--history:focus-visible {
  outline: none !important;
  background-color: var(--wp--preset--color--white);
  box-shadow: inset 0 0 0 2px var(--wp--preset--color--organic-green, #646556) !important;
}

.frodig-search__submit {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  min-width: 33px;
  min-height: 33px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: transparent;
  color: var(--wp--preset--color--organic-green);
  cursor: pointer;
}

.frodig-search__close {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: transparent;
  /* Muted gray — readable on cream surface and white input. */
  color: #888;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.frodig-search.is-open .frodig-search__close,
.frodig-search.is-focused .frodig-search__close {
  display: flex;
}

.frodig-search__backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(33, 45, 32, 0.35);
}

.frodig-search__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 110;
  width: 100%;
  max-width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  transform: translateY(-10px);
}

.frodig-search__list {
  width: 100%;
  max-width: 100%;
  min-height: var(--frodig-search-panel-min-height);
  max-height: var(--frodig-search-panel-height);
  overflow-x: hidden;
  overflow-y: auto;
  /* Side/bottom inset so last-row focus chrome is not flush against the clip edge. */
  padding: 0 2px 2px;
  background: var(--frodig-search-surface);
  border: 0;
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(33, 45, 32, 0.12);
}

.frodig-search__panel:has(.frodig-search__details:not([hidden]))
  .frodig-search__list {
  border-radius: 4px 0 0 4px;
}

.frodig-search__details {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: var(--frodig-search-details-width);
  min-width: var(--frodig-search-details-width);
  max-width: var(--frodig-search-details-width);
  min-height: 100%;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  background: var(--frodig-search-surface);
  border: 0;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 8px 28px rgba(33, 45, 32, 0.12);
}

@keyframes frodig-search-details-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Discrete centered sage spinner while details/scope HTML loads. */
.frodig-search__details.is-loading::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.625rem;
  margin-left: -0.625rem;
  border: 0.125rem solid color-mix(in srgb, var(--wp--preset--color--sage) 25%, transparent);
  border-top-color: var(--wp--preset--color--sage);
  border-radius: 50%;
  animation: frodig-search-details-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .frodig-search__details.is-loading::after {
    animation: none;
  }
}

.frodig-search__suggestion {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 0 10px;
  align-items: center;
  min-height: 48px;
  max-width: 100%;
  padding: 8px 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border: 0;
  width: 100%;
  background: transparent;
  text-align: left;
  font: inherit;
}

.frodig-search__suggestion--scope {
  grid-template-columns: 1fr;
  color: var(--wp--preset--color--forest-night);
  font-size: 14px;
}

.frodig-search__suggestion--scope .frodig-search__scope-quiet {
  font-size: 12px;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 65%,
    transparent
  );
}

.frodig-search__suggestion--see-all,
.frodig-search__suggestion--empty {
  grid-template-columns: 1fr;
  font-size: 14px;
  color: var(--wp--preset--color--organic-green);
  font-family: var(--wp--preset--font-family--body);
  font-weight: var(--wp--custom--font-weight--heading, 600);
}

.frodig-search__suggestion--history {
  grid-template-columns: 48px 1fr;
  color: var(--wp--preset--color--forest-night);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  font-size: 15px;
}

.frodig-search__history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  /* Muted gray magnifier — forest-night mixed toward transparent. */
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 45%,
    transparent
  );
}

.frodig-search__history-icon .frodig-search__submit-icon {
  transform: none;
}

.frodig-search__history-phrase {
  min-width: 0;
}

.frodig-search__suggestion--headline,
.frodig-search__suggestion--history-head {
  grid-template-columns: 1fr;
  cursor: default;
  min-height: 0;
  margin: 0;
  padding: 10px 12px 8px;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  color: var(--wp--preset--color--organic-green);
  border-bottom: 1px solid #e8e8e8;
  border-radius: 0;
}

.frodig-search__suggestion--headline {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.frodig-search__suggestion--history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.frodig-search__list > .frodig-search__suggestion--popular-head {
  margin-top: 12px;
}

.frodig-search__list > .frodig-search__suggestion--popular-head:first-child {
  margin-top: 0;
}

.frodig-search__history-clear {
  border: 0;
  background: transparent;
  color: var(--wp--preset--color--organic-green);
  cursor: pointer;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  padding: 0;
}

.frodig-search__thumb {
  width: 48px;
  height: 48px;
  border-radius: 2px;
  object-fit: cover;
  background: var(--wp--preset--color--mist);
}

.frodig-search__thumb-spacer {
  width: 48px;
  height: 48px;
}

.frodig-search__meta {
  min-width: 0;
}

.frodig-search__title {
  display: block;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  color: var(--wp--preset--color--forest-night);
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frodig-search__title strong,
.frodig-search__snippet strong {
  font-weight: 700;
}

.frodig-search__brand-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 2px;
}

.frodig-search__brand {
  display: block;
  min-width: 0;
  flex: 0 1 auto;
  font-size: 12px;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 65%,
    transparent
  );
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frodig-search__brand:empty {
  display: none;
}

.frodig-search__pills {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.frodig-search__pill {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 1px 5px;
  border: 1px solid
    color-mix(in srgb, var(--wp--preset--color--mist) 85%, var(--wp--preset--color--forest-night));
  border-radius: 2px;
  background: transparent;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 70%,
    transparent
  );
  font-family: var(--wp--preset--font-family--body);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}

.frodig-search__pill--oos {
  opacity: 0.5;
  text-decoration: line-through;
}

.frodig-search__pill-more {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 60%,
    transparent
  );
  white-space: nowrap;
}

.frodig-search__snippet {
  display: block;
  font-size: 12px;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 70%,
    transparent
  );
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.frodig-search__price {
  font-family: var(--wp--preset--font-family--bogart);
  font-weight: var(--wp--custom--font-weight--heading, 600);
  color: var(--wp--preset--color--organic-green);
  font-size: 14px;
  white-space: nowrap;
}

.frodig-search-details__image-link {
  display: block;
  margin-bottom: 12px;
}

.frodig-search-details__image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.frodig-search-details__title {
  display: block;
  font-family: var(--wp--preset--font-family--bogart);
  font-weight: var(--wp--custom--font-weight--heading, 600);
  color: var(--wp--preset--color--forest-night);
  text-decoration: none;
  font-size: 18px;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
}

/* Specificity beats generic `p` resets so spacing before price/ATC sticks. */
.frodig-search-details__inner--product > .frodig-search-details__brand {
  display: block;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 12px;
  font-family: var(--wp--preset--font-family--body);
  font-size: 13px;
  line-height: 1.3;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 70%,
    transparent
  );
}

.frodig-search-details__price {
  font-family: var(--wp--preset--font-family--bogart);
  font-weight: var(--wp--custom--font-weight--heading, 600);
  color: var(--wp--preset--color--organic-green);
  font-size: 14px;
  margin-bottom: 12px;
}

.frodig-search-details__inner--product:has(.frodig-listing-atc)
  .frodig-search-details__price {
  display: none;
}

.frodig-search-details__atc .frodig-listing-atc {
  margin-top: 0;
}

.frodig-search-details__atc .frodig-listing-atc__price-row {
  margin-top: 0;
  flex-wrap: wrap;
}

.frodig-search-details__atc .frodig-listing-atc__pills {
  flex-wrap: wrap;
}

.frodig-search-details__scope-heading {
  margin: 0 0 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--wp--preset--color--mist);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
  color: var(--wp--preset--color--forest-night);
}

.frodig-search-details__scope-label {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.frodig-search-details__empty {
  margin: 0;
  font-size: 14px;
  color: color-mix(
    in srgb,
    var(--wp--preset--color--forest-night) 70%,
    transparent
  );
}

.frodig-search-details__inner--product,
.frodig-search-details__inner--scope {
  min-height: 100%;
}

.frodig-search-scope {
  list-style: none;
  margin: 0;
  padding: 0;
}

.frodig-search-scope__item + .frodig-search-scope__item {
  margin-top: 16px;
}

.frodig-search-scope__link {
  display: grid;
  grid-template-columns: var(--frodig-search-scope-thumb) 1fr;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.frodig-search-scope__thumb,
.frodig-search-scope__thumb-spacer {
  /* Match Fibo .dgwt-wcas-tpd-image boxed thumbs. */
  box-sizing: border-box;
  width: var(--frodig-search-scope-thumb);
  height: var(--frodig-search-scope-thumb);
  padding: 4px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  object-fit: cover;
}

.frodig-search-scope__title {
  display: block;
  font-family: var(--wp--preset--font-family--bogart);
  font-weight: var(--wp--custom--font-weight--heading, 600);
  color: var(--wp--preset--color--forest-night);
  font-size: 14px;
  line-height: 1.25;
}

.frodig-search-scope__price {
  display: block;
  margin-top: 2px;
  font-family: var(--wp--preset--font-family--bogart);
  font-weight: var(--wp--custom--font-weight--heading, 600);
  color: var(--wp--preset--color--organic-green);
  font-size: 13px;
}

.frodig-search-scope__all {
  display: block;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--wp--preset--color--mist);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--wp--preset--color--organic-green);
  text-decoration: none;
}

.frodig-search-scope__all:hover {
  color: var(--wp--preset--color--forest-night);
}

.frodig-search-scope__all:focus-visible {
  outline: 2px solid var(--wp--preset--color--organic-green);
  outline-offset: 2px;
  color: var(--wp--preset--color--forest-night);
}

body.frodig-search-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  /* Always show the field in the header (no icon → fullscreen overlay). */
  .frodig-search {
    display: block;
    width: 100%;
    max-width: none;
  }

  .frodig-search.is-open,
  .frodig-search.is-focused {
    /* Above fixed backdrop (90) so field + panel stay interactive. */
    z-index: 120;
  }

  .frodig-search__open {
    display: none !important;
  }

  .frodig-search__shell,
  .frodig-search__shell[hidden] {
    display: block !important;
    position: relative;
    width: 100%;
    max-width: none;
    background: transparent;
    padding: 0;
    z-index: 110;
  }

  .frodig-search.is-open .frodig-search__shell {
    /* Keep in-flow; do not cover the page. */
    display: block !important;
    position: relative;
    inset: auto;
    z-index: 110;
    background: transparent;
    padding: 0;
  }

  /*
   * Close: 50×50 flush right. Padding reserved always so focus doesn’t
   * change content width; button still only paints when open/focused.
   */
  .frodig-search__input::-webkit-search-cancel-button {
    display: none;
  }

  .frodig-search__close {
    display: none;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    color: #888;
  }

  .frodig-search__close span {
    display: block;
    line-height: 1;
  }

  .frodig-search.is-open .frodig-search__close,
  .frodig-search.is-focused .frodig-search__close {
    display: flex !important;
  }

  .frodig-search__input {
    /*
     * Cream surface matches dropdown (--frodig-search-surface).
     * Right 50px always reserved for close (no open/closed width jump).
     * Left: 16px to icon + 16px icon + 16px to text = 48px.
     */
    padding: 13px 50px 13px 48px;
    line-height: 24px;
    border-radius: 10px;
    background-color: var(--frodig-search-surface);
    box-shadow: 0 0 0 1px var(--wp--preset--color--organic-green);
  }

  /*
   * Keep full pill radius on mobile when open/focused/dropdown open.
   * Desktop still squares bottom corners for the joined list.
   */
  .frodig-search.is-open .frodig-search__input,
  .frodig-search.is-focused .frodig-search__input,
  .frodig-search.is-dropdown-open .frodig-search__input {
    padding-right: 50px;
    border-radius: 10px;
    background-color: var(--frodig-search-surface);
    box-shadow: 0 0 0 1px var(--wp--preset--color--organic-green);
  }

  /* Stable placeholder — no open/closed padding toggle on mobile. */
  .frodig-search__input::placeholder,
  .frodig-search.is-open .frodig-search__input::placeholder,
  .frodig-search.is-focused .frodig-search__input::placeholder {
    padding-right: 0;
  }

  /*
   * Magnifier: equal inset — 16px from field edge, 16px from text
   * (icon ~16px wide → padding-left 48px).
   */
  .frodig-search__submit {
    left: 16px;
    top: 11px;
  }

  /* Optical vertical align — magnifier sits a hair high vs text. */
  .frodig-search__submit-icon {
    transform: translateY(-3px);
  }

  /*
   * Must beat the desktop .is-dropdown-open panel rule (same specificity,
   later in this media query) so width/margin are not reset to 100%/0.
   */
  .frodig-search.is-dropdown-open .frodig-search__panel,
  .frodig-search__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: 120;
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 0 calc(50% - 50vw);
    border: 0;
    box-shadow: none;
    transform: none;
    overflow: visible;
  }

  .frodig-search.is-dropdown-open .frodig-search__list {
    border: 0;
    margin-top: 0;
    border-radius: 0;
    max-height: none;
    overflow: visible;
    box-shadow: 0 8px 28px rgba(33, 45, 32, 0.12);
  }

  .frodig-search__details {
    display: none !important;
  }

  /*
   * Grow with results; page scrolls — no inner max-height / overflow-y:auto.
   * Desktop keeps constrained scrolling above this media query.
   */
  .frodig-search__list {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 0 4px 4px;
    background: var(--frodig-search-surface);
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 28px rgba(33, 45, 32, 0.12);
  }

  /* Page stays scrollable; dimming is the fixed backdrop only. */
  body.frodig-search-open {
    overflow: visible;
  }

  .frodig-search__suggestion {
    min-height: 48px;
  }

  /*
   * Mobile dimming layer — fixed under shell/panel (z-index 90 < 110/120).
   * JS un-hides it when search mode is open; click closes (same as desktop).
   */
  .frodig-search__backdrop {
    display: block;
    z-index: 90;
  }

  .frodig-search__backdrop[hidden] {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .frodig-search {
    --frodig-search-panel-min-height: 430px;
  }

  .frodig-search__open {
    display: none !important;
  }

  .frodig-search__shell[hidden] {
    display: block !important;
  }

  /*
   * Few suggestion rows: list min-height alone does not always give the
   * absolutely positioned details panel a definite containing block (100%
   * min-height can compute to 0). Lock panel + details to the token.
   */
  .frodig-search__panel:not([hidden]) {
    min-height: var(--frodig-search-panel-min-height);
  }

  .frodig-search__panel:has(.frodig-search__details:not([hidden]))
    .frodig-search__list {
    min-height: var(--frodig-search-panel-min-height);
  }

  .frodig-search__panel:has(.frodig-search__details:not([hidden]))
    .frodig-search__details {
    min-height: var(--frodig-search-panel-min-height);
  }
}

/*
 * Product image lightbox is position:fixed at z-index 1000, but Kadence
 * columns (position:relative; z-index:1) trap it below this field (z-index:100).
 * z-index:0 keeps the magnifier and dropdown inside a context under that column.
 * auto would let .frodig-search__submit (z-index:2) escape above the dialog.
 */
body.wc-block-product-gallery-dialog-open .frodig-search {
  z-index: 0;
}