/* One dropdown structure for language, category and portion measurements. */
select {
  appearance: none;
  min-height: 44px;
  padding: 10px 42px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--surface, #fff);
  background-image: url('/assets/chevron-down.svg');
  background-position: right 14px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  color: var(--burgundy, var(--brand));
  font-family: 'DM Sans', sans-serif;
  line-height: 1.3;
  cursor: pointer;
}
select:hover { background-color: var(--paper); }
select:focus-visible { outline: 2px solid var(--burgundy, var(--brand)); outline-offset: 3px; }
select option { color: var(--burgundy, var(--brand)); background: var(--surface, #fff); }
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; background-image: none; }
  select:open { border-color: var(--burgundy, var(--brand)); background-color: var(--paper); }
  select::picker-icon { content: ''; display: block; flex: 0 0 16px; align-self: center; width: 16px; height: 16px; margin: 0; background: url('/assets/chevron-down.svg') center / contain no-repeat; }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    inline-size: anchor-size(self-inline);
    min-inline-size: anchor-size(self-inline);
    box-sizing: border-box;
    margin-block-start: 8px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface, #fff);
    color: var(--burgundy, var(--brand));
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 4px 8px rgb(50 45 40 / .06), 0 12px 28px rgb(50 45 40 / .1);
  }
  select option { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 6px; font-size: 15px; cursor: pointer; }
  select option + option { margin-top: 4px; }
  select option:checked { background: #ece4d7; font-weight: 500; }
  select option:hover, select option:focus-visible { background: #eee8dc; outline: none; }
  select option::checkmark { order: 1; margin-inline-start: auto; color: var(--burgundy, var(--brand)); }
}