/* JJ EDC select surfaces. Keep the original controls, values and change events.
   Native pickers progressively enhance where base-select is supported. */
body.jj-neutral-ui {
  --jj-select-ink: #171918;
  --jj-select-muted: #626661;
  --jj-select-line: #dedfdb;
  --jj-select-accent: #61725a;
  --jj-select-hover: #f4f5f1;
  --jj-select-active: #edf0e8;
  --jj-select-shadow: 0 16px 42px rgb(23 25 24 / 12%), 0 2px 6px rgb(23 25 24 / 4%);
}

/* Explicit scope avoids phone-code overlays, listboxes and hidden theme-select
   controls. Address cascade selects remain native and are never reparented. */
body.jj-neutral-ui.jj-refined-ui :is(
  .jj-wishlist-toolbar select,
  jj-catalog-filters select,
  theme-address-cascade select,
  select[name="customer[gender]"]
):not([multiple]):not([size]):not([hidden]) {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--jj-select-line);
  border-radius: 10px;
  background-color: #fff;
  color: var(--jj-select-ink);
  font-family: var(--jj-font, inherit);
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
body.jj-neutral-ui.jj-refined-ui :is(
  .jj-wishlist-toolbar select,
  jj-catalog-filters select,
  theme-address-cascade select,
  select[name="customer[gender]"]
):focus-visible {
  outline: 2px solid var(--jj-select-accent);
  outline-offset: 3px;
}
body.jj-neutral-ui.jj-refined-ui :is(
  .jj-wishlist-toolbar select,
  jj-catalog-filters select,
  theme-address-cascade select,
  select[name="customer[gender]"]
):disabled {
  color: #757970;
  background-color: #f1f2ee;
  cursor: not-allowed;
}

@supports (appearance: base-select) and selector(::picker(select)) {
  body.jj-neutral-ui.jj-refined-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  ):not([multiple]):not([size]):not([hidden]),
  body.jj-neutral-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  ):not([multiple]):not([size]):not([hidden])::picker(select) {
    appearance: base-select;
  }
  body.jj-neutral-ui.jj-refined-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  ):not([multiple]):not([size]):not([hidden]) {
    display: flex;
    align-items: center;
    gap: 16px;
    background-image: none;
    cursor: pointer;
  }
  body.jj-neutral-ui.jj-refined-ui :is(.jj-wishlist-toolbar select, jj-catalog-filters select) {
    padding: 10px 14px;
  }
  body.jj-neutral-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  )::picker(select) {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    max-height: min(360px, 55dvh);
    margin-block: 6px;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--jj-select-line);
    border-radius: 14px;
    background: #fff;
    color: var(--jj-select-ink);
    box-shadow: var(--jj-select-shadow);
    font-family: var(--jj-font, inherit);
    font-size: 14px;
    line-height: 1.5;
    scrollbar-width: thin;
    scrollbar-color: #b9bdb4 transparent;
  }
  body.jj-neutral-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  )::picker-icon {
    flex: none;
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    content: "";
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--jj-select-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 160ms ease;
  }
  body.jj-neutral-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  ):open::picker-icon {
    transform: translateY(2px) rotate(225deg);
  }
  body.jj-neutral-ui .jj-wishlist-toolbar select + svg { display: none; }
  body.jj-neutral-ui :is(theme-address-cascade select, select[name="customer[gender]"]) ~ .icon-arrow { display: none; }
  body.jj-neutral-ui :is(
    .jj-wishlist-toolbar select,
    jj-catalog-filters select,
    theme-address-cascade select,
    select[name="customer[gender]"]
  ) option {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--jj-select-ink);
    font: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  body.jj-neutral-ui :is(.jj-wishlist-toolbar select, jj-catalog-filters select, theme-address-cascade select, select[name="customer[gender]"]) option:is(:hover, :focus) {
    outline: none;
    background: var(--jj-select-hover);
  }
  body.jj-neutral-ui :is(.jj-wishlist-toolbar select, jj-catalog-filters select, theme-address-cascade select, select[name="customer[gender]"]) option:checked {
    background: var(--jj-select-active);
    font-weight: 600;
  }
  body.jj-neutral-ui :is(.jj-wishlist-toolbar select, jj-catalog-filters select, theme-address-cascade select, select[name="customer[gender]"]) option:disabled {
    color: #969a91;
    cursor: not-allowed;
  }
  body.jj-neutral-ui :is(.jj-wishlist-toolbar select, jj-catalog-filters select, theme-address-cascade select, select[name="customer[gender]"]) option::checkmark {
    order: 1;
    margin-inline-start: auto;
    color: var(--jj-select-accent);
  }
}

/* Existing theme menus keep their own positioning, state and mobile drawers. */
body.jj-neutral-ui :is(.theme-select__content, .facets-sorting__content, theme-locale-picker .dropdown-menu__list) {
  box-sizing: border-box;
  border: 1px solid var(--jj-select-line);
  border-radius: 14px;
  background: #fff;
  color: var(--jj-select-ink);
  box-shadow: var(--jj-select-shadow);
  font-family: var(--jj-font, inherit);
  font-size: 14px;
  line-height: 1.5;
}
body.jj-neutral-ui .theme-select__content::after { display: none; }
body.jj-neutral-ui .theme-select__list { padding: 6px; scrollbar-width: thin; }
body.jj-neutral-ui :is(.theme-select__option, .facets-sorting__content label, theme-locale-picker .dropdown-menu__list-item) {
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--jj-select-ink);
  font: inherit;
  line-height: 1.5;
  transition: background-color 140ms ease;
}
body.jj-neutral-ui :is(.theme-select__option, .facets-sorting__content label, theme-locale-picker .dropdown-menu__list-item):is(:hover, :focus-within) {
  background-color: var(--jj-select-hover);
}
body.jj-neutral-ui .theme-select__option[selected],
body.jj-neutral-ui :is(.facets-sorting__content label, theme-locale-picker .dropdown-menu__list-item):has(input:checked) {
  background-color: var(--jj-select-active);
  font-weight: 600;
}
body.jj-neutral-ui .theme-select__option[selected] { padding-inline-end: 34px; }
body.jj-neutral-ui .theme-select__option[disabled] { color: #969a91; background: transparent; }
body.jj-neutral-ui .facets-sorting__content { gap: 8px; padding: 8px; max-width: calc(100vw - 24px); }
body.jj-neutral-ui .facets-sorting__content-body { gap: 2px; }
body.jj-neutral-ui .facets-sorting__content-header { padding: 8px 12px 12px; border-color: var(--jj-select-line); }
body.jj-neutral-ui .facets-sorting__content input:checked ~ span { border: 0; }
body.jj-neutral-ui .facets-sorting__content svg { order: 1; margin-inline-start: auto; color: var(--jj-select-accent); }
body.jj-neutral-ui theme-locale-picker .dropdown-menu__list { padding: 6px; max-width: calc(100vw - 24px); scrollbar-width: thin; }
body.jj-neutral-ui theme-locale-picker .dropdown-menu__list-item { white-space: normal; }
body.jj-neutral-ui theme-locale-picker .dropdown-menu__list-item:has(input:checked)::after {
  content: "✓";
  margin-inline-start: auto;
  padding-inline-start: 16px;
  color: var(--jj-select-accent);
}
@media (min-width: 960px) {
  body.jj-neutral-ui theme-select > select,
  body.jj-neutral-ui theme-select::before,
  body.jj-neutral-ui theme-select::after { border-radius: 10px; }
  body.jj-neutral-ui theme-select[open][data-adaptation-position="bottom"] .theme-select__main { inset-block: calc(100% + 6px) auto; }
  body.jj-neutral-ui theme-select[open][data-adaptation-position="top"] .theme-select__main { inset-block: auto calc(100% + 6px); }
}
@media (max-width: 959px) {
  body.jj-neutral-ui .theme-select__content {
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  body.jj-neutral-ui .theme-select__head { padding: 12px 16px; border-color: var(--jj-select-line); }
  body.jj-neutral-ui .theme-select__close-button { width: 44px; height: 44px; border-radius: 50%; background: #f4f5f1; }
  body.jj-neutral-ui.jj-refined-ui :is(.jj-wishlist-toolbar select, jj-catalog-filters select, theme-address-cascade select, select[name="customer[gender]"]) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.jj-neutral-ui :is(select, .theme-select__option, .facets-sorting__content label, theme-locale-picker .dropdown-menu__list-item) { transition: none; }
  body.jj-neutral-ui select::picker-icon { transition: none; }
}
@media (max-width: 560px) {
  /* The app hides sorting on small screens. Keep its original control usable. */
  body.jj-neutral-ui.jj-wishlist-page .jj-wishlist-toolbar > div:has(select) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  body.jj-neutral-ui.jj-wishlist-page .jj-wishlist-toolbar div:has(> select) {
    display: block;
    width: 100%;
    min-width: 0;
  }
  body.jj-neutral-ui.jj-wishlist-page .jj-wishlist-toolbar select { width: 100%; }
}