/* One selection surface across React and iframe pages; semantic tokens follow the owner. */
/* Keep the native control as the form/state owner; draw the C-style segment in CSS. */
select:not([multiple]):not([size]), select[data-cq-select] {
  --cq-select-accent: var(--acid, var(--accent-cyan, var(--accent, var(--ink))));
  --cq-select-card: var(--card, var(--card-bg, var(--panel, var(--bg))));
  --cq-select-line: var(--line, var(--card-border, var(--border)));
  --cq-select-arrow-surface: color-mix(in srgb, var(--cq-select-accent) 7%, var(--cq-select-card));
  -webkit-appearance: none; appearance: none;
  padding-right: 48px !important;
  background-image:
    linear-gradient(45deg, transparent 40%, var(--cq-select-accent) 40%, var(--cq-select-accent) 60%, transparent 60%),
    linear-gradient(135deg, transparent 40%, var(--cq-select-accent) 40%, var(--cq-select-accent) 60%, transparent 60%),
    linear-gradient(var(--cq-select-line), var(--cq-select-line)),
    linear-gradient(var(--cq-select-arrow-surface), var(--cq-select-arrow-surface)) !important;
  background-position: calc(100% - 17px) 50%, calc(100% - 11px) 50%, calc(100% - 35px) 0, 100% 0 !important;
  background-size: 8px 8px, 8px 8px, 1px 100%, 36px 100% !important;
  background-repeat: no-repeat !important;
}
select[data-cq-select][aria-expanded="true"], select:not([multiple]):not([size])[aria-expanded="true"] {
  --cq-select-arrow-surface: color-mix(in srgb, var(--cq-select-accent) 12%, var(--cq-select-card));
  background-image:
    linear-gradient(135deg, transparent 40%, var(--cq-select-accent) 40%, var(--cq-select-accent) 60%, transparent 60%),
    linear-gradient(45deg, transparent 40%, var(--cq-select-accent) 40%, var(--cq-select-accent) 60%, transparent 60%),
    linear-gradient(var(--cq-select-line), var(--cq-select-line)),
    linear-gradient(var(--cq-select-arrow-surface), var(--cq-select-arrow-surface)) !important;
}
select[data-cq-select] { cursor: pointer; border-radius: 8px; font-size: max(12px, 1em); color: var(--ink, var(--text-primary)); background-color: var(--paper, var(--bg)); }
select[data-cq-select]:focus-visible { outline: 2px solid var(--acid, var(--accent-cyan, var(--accent))); outline-offset: 2px; }
.cq-select-popup {
  --ink: var(--text-primary); --muted: var(--text-secondary); --card: var(--card-bg); --paper: var(--bg); --line: var(--card-border); --acid: var(--accent-cyan);
  position: fixed; inset: auto; margin: 0; padding: 6px; box-sizing: border-box;
  color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 16%, transparent);
  overflow: hidden;
  /* Placement measures the final size, including when reduced motion is enabled. */
  transition: none !important; animation: none !important;
  font-size: 13px; line-height: 1.5; text-align: left;
}
.cq-select-popup::backdrop { background: transparent; }
/* Scroll only the options so they cannot paint behind the search field or its gaps. */
.cq-select-popup:popover-open { display: flex; flex-direction: column; }
.cq-select-popup .cq-select-list { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--muted) var(--card); }
.cq-select-popup .cq-select-search { flex: 0 0 auto; width: 100%; box-sizing: border-box; min-height: 36px; margin: 0 0 6px; padding: 8px 10px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.cq-select-popup .cq-select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 38px; padding: 8px 10px; margin: 0; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 6px; font: inherit; text-align: left; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }
.cq-select-option > span:last-child { flex-shrink: 0; width: 14px; }
.cq-select-popup .cq-select-option[aria-selected="true"] { background: color-mix(in srgb, var(--acid) 15%, var(--card)); border-color: color-mix(in srgb, var(--acid) 55%, var(--line)); font-weight: 600; }
.cq-select-popup .cq-select-option:not(:disabled):hover { background: color-mix(in srgb, var(--acid) 10%, var(--card)); }
.cq-select-popup .cq-select-option:disabled { opacity: .45; cursor: not-allowed; }
.cq-select-popup :is(button, input):focus-visible { outline: 2px solid var(--acid); outline-offset: -2px; }
.cq-select-popup .cq-select-group, .cq-select-empty { margin: 0; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.cq-select-popup .cq-select-more { flex: 0 0 auto; width: 100%; min-height: 36px; padding: 8px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font: inherit; cursor: pointer; }
.cq-select-popup [hidden] { display: none !important; }
.cq-select-heading { display: none; }
.cq-select-popup[data-presentation="sheet"] .cq-select-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 4px 6px 10px; }
.cq-select-heading strong { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.cq-select-popup .cq-select-dismiss { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.cq-select-popup[data-presentation="sheet"] { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
.cq-select-popup[data-presentation="sheet"]::backdrop { background: color-mix(in srgb, var(--ink) 24%, transparent); }
.cq-select-popup[data-density="compact"] .cq-select-option { min-height: 34px; padding-block: 6px; }

@media (pointer: coarse), (max-width: 767px) {
  select:not([multiple]):not([size]), select[data-cq-select] { min-height: 44px; min-width: 0; max-width: 100%; font-size: 16px !important; }
  .cq-select-popup .cq-select-search { min-height: 44px; font-size: 16px; }
  .cq-select-popup .cq-select-option, .cq-select-popup[data-density="compact"] .cq-select-option, .cq-select-popup .cq-select-more { min-height: 44px; }
}

/* Custom menus retain their specialized selection logic. */
[data-selection-surface], details[data-selection-multiple][open] {
  color: var(--ink) !important; background: var(--card) !important;
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 16%, transparent) !important;
  max-width: calc(100vw - 24px); box-sizing: border-box;
}
[data-selection-surface="multiple"] label, details[data-selection-multiple] label {
  min-height: 36px; padding: 6px 10px; box-sizing: border-box; border-radius: 6px;
  color: var(--ink); font-size: 13px;
}
[data-selection-surface="multiple"] label:has(:checked), details[data-selection-multiple] label:has(:checked) { background: color-mix(in srgb, var(--acid) 15%, var(--card)); }
[data-selection-surface] :is(button, input):focus-visible, details[data-selection-multiple] :is(summary, input):focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
[data-selection-surface] input[type="checkbox"], details[data-selection-multiple] input { accent-color: var(--acid); }
[data-selection-surface="menu"] > button { min-height: 36px; border-radius: 6px; font-size: 13px; }
[data-selection-surface="menu"] > button:hover, [data-selection-surface="search"] button[aria-pressed="true"] { background: color-mix(in srgb, var(--acid) 15%, var(--card)); }
[data-selection-surface="calendar"] .product-calendar-grid button.selected { color: var(--on-accent); background: var(--acid); }

@media (pointer: coarse), (max-width: 767px) {
  [data-selection-surface="multiple"] label, details[data-selection-multiple] label, [data-selection-surface="menu"] > button { min-height: 44px; }
}
@media (max-width: 767px) {
  [data-selection-surface="multiple"] { max-height: min(440px, calc(100dvh - 96px)); overflow-y: auto; overscroll-behavior: contain; }
}