/* Shared select surfaces. The native control remains the form's source of truth. */
body {
  --select-bg: #fff;
  --select-color-scheme: light;
  --select-hover-bg: #faf9fc;
  --select-menu-bg: #fff;
  --select-border: #dcdde4;
  --select-hover-border: #b8bbc7;
  --select-text: #292c36;
  --select-muted: #777e8e;
  --select-accent: #b93845;
  --select-selected: #fcf0f1;
  --select-active: #f3f3f7;
  --select-ring: #cc525c26;
  --select-shadow: 0 12px 34px #1d26331c, 0 3px 10px #1d26330b;
  --select-motion: 180ms cubic-bezier(.2,.75,.3,1);
}
body.explore {
  --select-bg: #22252a;
  --select-color-scheme: dark;
  --select-hover-bg: #292d33;
  --select-menu-bg: #272b31;
  --select-border: #41464f;
  --select-hover-border: #666d79;
  --select-text: #eceef3;
  --select-muted: #a1a9b6;
  --select-accent: #f09aa3;
  --select-selected: #453038;
  --select-active: #363b44;
  --select-ring: #e77c8a24;
  --select-shadow: 0 16px 45px #0005, 0 4px 12px #0003, inset 0 1px #ffffff05;
}
/* Explicit light mode overrides the storefront's dark picker without changing native form values. */
:root[data-theme="light"] body.explore {
  --select-bg: var(--theme-field, #fff);
  --select-color-scheme: light;
  --select-hover-bg: var(--theme-panel-alt, #f4f5f7);
  --select-menu-bg: var(--theme-panel, #fff);
  --select-border: var(--theme-border-strong, #bfc5cd);
  --select-hover-border: #8b929d;
  --select-text: var(--theme-text, #202124);
  --select-muted: var(--theme-muted, #68707e);
  --select-accent: var(--accent-text, #b82632);
  --select-selected: var(--accent-soft, #fff0f1);
  --select-active: var(--theme-raised, #eef0f3);
  --select-ring: rgb(184 38 50 / 15%);
  --select-shadow: 0 12px 34px rgb(32 33 36 / 12%), 0 3px 10px rgb(32 33 36 / 5%);
}
:root[data-theme="light"] body .select-control > .select-control-trigger[aria-invalid="true"] { border-color: var(--theme-danger, #b82632); }
:root[data-theme="light"] body .select-control-error { color: var(--theme-danger, #b82632); }
/* Native fallbacks share the surface; touch devices keep their native picker. */
body select:not([multiple]):not([size]):not(.select-control-native) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 39px !important;
  border: 1px solid var(--select-border) !important;
  border-radius: 11px !important;
  color: var(--select-text) !important;
  background-color: var(--select-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23949caa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  box-shadow: inset 0 1px #ffffff04;
  cursor: pointer;
  transition: border-color var(--select-motion), background-color var(--select-motion), box-shadow var(--select-motion);
  color-scheme: var(--select-color-scheme);
}
body select { color-scheme: var(--select-color-scheme); }
body select:not([multiple]):not([size]):not(.select-control-native):hover:not(:disabled) { border-color: var(--select-hover-border) !important; background-color: var(--select-hover-bg) !important; }
body select:not([multiple]):not([size]):not(.select-control-native):focus-visible { border-color: var(--select-accent) !important; outline: 2px solid var(--select-ring) !important; outline-offset: 2px; box-shadow: 0 0 0 3px var(--select-ring); }
body select:not([multiple]):not([size]):not(.select-control-native):disabled { opacity: .5; cursor: not-allowed; }
body select option, body select optgroup { color: var(--select-text); background: var(--select-menu-bg); }
body .select-control { position: relative; display: inline-grid; grid-template-columns: minmax(0,1fr); width: 100%; min-width: 0; max-width: 100%; vertical-align: middle; --select-height: 44px; --select-font-size: 13px; }
body .select-control > select.select-control-native {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body .select-control > .select-control-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: var(--select-height);
  margin: 0;
  padding: 10px 13px 10px 14px;
  border: 1px solid var(--select-border);
  border-radius: 11px;
  color: var(--select-text);
  background: var(--select-bg);
  box-shadow: inset 0 1px #ffffff05, 0 1px 2px #0000000a;
  font-family: inherit;
  font-size: var(--select-font-size);
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--select-motion), border-color var(--select-motion), box-shadow var(--select-motion), transform var(--select-motion);
}
body .select-control > .select-control-trigger:hover:not(:disabled) { border-color: var(--select-hover-border); background: var(--select-hover-bg); box-shadow: inset 0 1px #ffffff08, 0 3px 9px #00000010; }
body .select-control > .select-control-trigger:active:not(:disabled) { transform: translateY(1px); }
body .select-control > .select-control-trigger:focus-visible,
body .select-control > .select-control-trigger[aria-expanded="true"] { border-color: var(--select-accent); outline: 2px solid var(--select-ring); outline-offset: 2px; box-shadow: 0 0 0 3px var(--select-ring), inset 0 1px #ffffff06; }
body .select-control > .select-control-trigger:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
body .select-control > .select-control-trigger[aria-invalid="true"] { border-color: #e77983; box-shadow: 0 0 0 2px #d84a5620; }
body .select-control-value { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .select-control-chevron { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; color: var(--select-muted); pointer-events: none; transition: transform 220ms cubic-bezier(.2,.75,.3,1), color var(--select-motion); }
body .select-control-trigger[aria-expanded="true"] .select-control-chevron { transform: rotate(180deg); color: var(--select-accent); }
body .select-control-error { margin: 7px 0 0; color: #e77983; font-size: 11px; line-height: 1.6; }
body .select-control-error[hidden] { display: none; }
body .select-control-menu {
  position: fixed;
  z-index: 10000;
  inset: auto;
  box-sizing: border-box;
  width: max-content;
  min-width: 120px;
  max-width: calc(100vw - 24px);
  max-height: min(320px, calc(100dvh - 24px));
  margin: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--select-hover-border);
  border-radius: 13px;
  color: var(--select-text);
  background: var(--select-menu-bg);
  box-shadow: var(--select-shadow);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
  scrollbar-width: thin;
  scrollbar-color: var(--select-border) transparent;
  transform-origin: top center;
}
body .select-control-menu[data-placement="top"] { transform-origin: bottom center; }
body .select-control-menu[hidden] { display: none; }
body .select-control-menu.is-open { animation: select-menu-in 160ms cubic-bezier(.2,.75,.3,1) both; }
body .select-control-menu::backdrop { background: transparent; }
body .select-control-menu .select-control-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 38px;
  margin: 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  color: var(--select-text);
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
body .select-control-menu .select-control-option + .select-control-option { margin-top: 2px; }
body .select-control-option-label { min-width: 0; overflow-wrap: anywhere; }
body .select-control-menu .select-control-option.is-active:not([aria-disabled="true"]) { background: var(--select-active); }
body .select-control-menu .select-control-option[aria-selected="true"] { color: var(--select-accent); background: var(--select-selected); font-weight: 550; }
body .select-control-menu .select-control-option[aria-selected="true"].is-active { background: var(--select-selected); box-shadow: inset 0 0 0 1px var(--select-ring); }
body .select-control-menu .select-control-option[aria-disabled="true"] { color: var(--select-muted); opacity: .45; cursor: not-allowed; }
body .select-control-check { flex: 0 0 16px; width: 16px; height: 16px; opacity: 0; color: var(--select-accent); }
body .select-control-option[aria-selected="true"] .select-control-check { opacity: 1; }
body .select-control-group { padding: 8px 11px 5px; color: var(--select-muted); font-size: 10px; font-weight: 550; letter-spacing: .02em; }
body .select-control-group:not(:first-child) { margin-top: 5px; border-top: 1px solid var(--select-border); }
/* Context sizes keep filters compact while form controls retain room to read. */
body .filter-select > .select-control { width: auto; min-width: 148px; flex: 1; }
body .filter-select:has(> svg) .select-control-trigger { padding-left: 36px; }
body .filter-select > svg { right: auto; left: 12px; z-index: 1; pointer-events: none; }
body .filter-select:has(> svg) select:not(.select-control-native) { padding-left: 36px !important; }
body .analytics-source-filter > .select-control { width: 164px; --select-height: 36px; --select-font-size: 11px; }
body .analytics-source-filter .select-control-trigger { padding-block: 7px; border-radius: 9px; }
body .detail-product-info .offer-platform-label > .select-control { --select-height: 44px; }
body .detail-product-info .offer-platform-label .select-control-trigger { font-weight: 550; }
body .select-control-menu[data-compact="true"] .select-control-option { font-size: 12px; }
@keyframes select-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 760px) {
  body .analytics-source-filter > .select-control { width: 100%; }
  body .filter-select > .select-control { min-width: 125px; }
}
@media (hover: none), (pointer: coarse), (max-width: 640px) {
  body select:not([multiple]):not([size]):not(.select-control-native) { min-height: 44px !important; font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .select-control *, body .select-control-menu, body .select-control-menu *, body select { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  body .select-control-trigger, body .select-control-menu { border-color: ButtonText; box-shadow: none; }
  body .select-control-trigger:focus-visible { outline: 2px solid Highlight; }
  body .select-control-menu .select-control-option.is-active { outline: 1px solid Highlight; }
}