/* «מיון» (theme.sortButton, app/catalog-sort.js): a chip at the end of the
   category row, in the «סינון» chip family (app/product-fields.css), its
   choices in a popover under it. Own file: a shop with the switch off never
   matches a rule here. */
#shop.has-catalog-sort{display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
#shop.has-catalog-sort > #navScroll{flex:1 1 0; min-width:0; margin-inline:0;}
#shop.has-catalog-sort > #navScroll:is([data-bento]){flex-basis:100%; margin-inline:auto;}
html[data-layout-categories="side"] #shop.has-catalog-sort > #navScroll{flex-basis:100%;}
.catalog-sort{position:relative; display:flex; flex:none; align-items:center; padding-inline:4px 16px; min-width:0;}
/* After «סינון»: the two chips read as one group, the row's end gutter moves to «מיון». */
#shop.has-catalog-sort > .tag-filter{padding-inline-end:4px;}
#shop.has-cat-arrows.has-catalog-sort:not(.has-tag-filter) > .catalog-sort{padding-inline-start:4px;}
/* A bento or the side list: the row takes its own line, «סינון» and «מיון» share the next. */
#shop.has-catalog-sort > #navScroll[data-bento] ~ .tag-filter,
html[data-layout-categories="side"] #shop.has-catalog-sort > .tag-filter{flex:1 1 auto; flex-basis:auto; max-width:none;}
#shop.has-catalog-sort > #navScroll[data-bento] ~ .catalog-sort,
html[data-layout-categories="side"] #shop.has-catalog-sort > .catalog-sort{padding-block:4px 0; padding-inline:4px 16px;}
#shop.has-catalog-sort:not(.has-tag-filter) > #navScroll[data-bento] ~ .catalog-sort,
html[data-layout-categories="side"] #shop.has-catalog-sort:not(.has-tag-filter) > .catalog-sort{flex-basis:100%; max-width:var(--container); padding:4px 16px 0;}
#shop.has-catalog-sort:not(.has-tag-filter) > #navScroll[data-bento] ~ .catalog-sort .catalog-sort-pop,
html[data-layout-categories="side"] #shop.has-catalog-sort:not(.has-tag-filter) > .catalog-sort .catalog-sort-pop{inset-inline:16px auto;}
.catalog-sort-open{
  display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0 14px;
  border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-chip, 999px);
  background:var(--surface, var(--paper, #fff)); color:var(--ink, #1F2A24);
  font:inherit; font-size:0.875rem; font-weight:700; cursor:pointer; white-space:nowrap;
}
.catalog-sort-open.is-on{border-color:var(--primary, #1F4D3A); color:var(--primary, #1F4D3A);}
/* A phone: «מיון» is its icon (its name stays the button's label), the row keeps its categories. */
@media (max-width:640px){
  .catalog-sort-open{padding:0 11px;}
  .catalog-sort-open > span{display:none;}
}
@media (pointer:coarse){
  .catalog-sort-open{min-height:44px; min-width:44px; justify-content:center;}
  .catalog-sort-choice{min-height:44px;}
  #shop.has-catalog-sort > .tag-filter .tag-filter-open{min-height:44px;}   /* the pair stands the same height */
}
/* A phone with both chips: «סינון» is its icon too (its aria-label names it), so the categories keep their room. */
@media (max-width:640px){
  #shop.has-catalog-sort > .tag-filter .tag-filter-open{padding:0 11px;}
  #shop.has-catalog-sort > .tag-filter .tag-filter-open > span{display:none;}
}
.catalog-sort-pop{
  position:absolute; top:calc(100% + 6px); inset-inline-end:16px; z-index:60;
  display:flex; flex-direction:column; gap:2px; width:max-content; max-width:min(18rem, calc(100vw - 32px)); padding:6px;
  border:1px solid var(--line, rgba(0,0,0,.14)); border-radius:var(--r-control, 12px); background:var(--paper, #fff);
  box-shadow:0 14px 32px -12px rgba(20,24,20,.35);
}
.catalog-sort-pop[hidden]{display:none;}
.catalog-sort-choice{display:block; width:100%; min-height:40px; padding:0 14px; border:0; border-radius:var(--r-chip, 999px);
  background:transparent; color:var(--ink, #1F2A24); font:inherit; font-size:0.875rem; font-weight:600; text-align:start; cursor:pointer; white-space:nowrap;}
.catalog-sort-choice:hover{background:rgba(31,77,58,0.08); background:color-mix(in srgb, var(--primary, #1F4D3A) 8%, transparent);}
.catalog-sort-choice[aria-pressed="true"]{background:var(--primary, #1F4D3A); color:var(--on-primary, #fff);}
.catalog-sort :is(button):focus-visible, .boutique-sort select:focus-visible{outline:var(--focus-ring-width,2px) solid var(--focus-ring,#0B5FFF); outline-offset:2px;}
/* The boutique toolbar's select (app/boutique.css .boutique-filter-panel): a 44px target on touch. */
@media (pointer:coarse){ .boutique-sort select{min-height:44px;} }

html[data-a11y-contrast="1"] :is(.catalog-sort-open, .catalog-sort-choice){background:#000 !important; color:#fff !important; border:1px solid #fff !important;}