/* Abordazh catalog listing — sort dropdown restyled to the design system.
   IBM Plex Sans 16/24, radius 4, white fields, inline-SVG chevron (keyboard_arrow_down). */

.products__sort {
  --abzc-ink: #001400;
  --abzc-border: #dcdcdc;
  --abzc-green: #051e05;
  --abzc-muted: #7a857a;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
}

/* the old external "Sort by:" label is gone from the template; hide any leftover */
.products__sort .products__sort-label { display: none !important; }

.products__sort-dropdown { position: relative; flex: 0 0 auto; }

/* trigger button — shows the current sort + our chevron; width = content */
.products__sort .products__sort-dropdown-button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 8px; min-width: 0; width: auto; white-space: nowrap;
  background: #fff; color: var(--abzc-ink);
  border: 0; border-radius: 4px;
  font-family: inherit; font-size: 14px; line-height: 24px; font-weight: 500;
  text-align: left; box-shadow: none;
}
.products__sort .products__sort-dropdown-button:hover,
.products__sort .products__sort-dropdown-button:focus,
.products__sort .products__sort-dropdown-button.show {
  background: #f1f4f1; color: var(--abzc-ink); border-color: #c2ccc2; box-shadow: none;
}
.products__sort .products__sort-icon { width: 20px; height: 20px; flex: none; color: var(--abzc-ink); }
.products__sort .products__sort-current { flex: 1 1 auto; }
.products__sort .abz-chevron {
  width: 20px; height: 20px; flex: none; margin-left: auto;
  color: var(--abzc-ink); transition: transform .16s ease;
}
.products__sort .products__sort-dropdown-button[aria-expanded="true"] .abz-chevron { transform: rotate(180deg); }

/* menu — width matches the (closed) trigger button; appears like the language/currency
   dropdowns (fade + slide). Bootstrap toggles display none/block; we animate the open state
   via keyframes (robust against the theme's cascade layers). */
.products__sort-dropdown .dropdown-menu {
  position: absolute; top: 100%; right: 0; left: auto;
  width: 100%; min-width: 0; margin-top: 0; padding: 4px;
  background: #fff; border: 1px solid var(--abzc-border); border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
.products__sort-dropdown .dropdown-menu.show { animation: abzSortDropIn .16s ease; }
@keyframes abzSortDropIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* items */
.products__sort-dropdown .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 4px;
  font-size: 14px; line-height: 24px; color: var(--abzc-ink);
}
.products__sort-optic { width: 20px; height: 20px; flex: none; color: var(--abzc-ink); }
.products__sort-optlabel { flex: 1 1 auto; white-space: nowrap; }
.products__sort-dropdown .dropdown-item.current .products__sort-optic { color: var(--abzc-green); }
.products__sort-dropdown .dropdown-item:hover,
.products__sort-dropdown .dropdown-item:focus { background: #f1f4f1; color: var(--abzc-ink); }
.products__sort-dropdown .dropdown-item.current { font-weight: 700; color: var(--abzc-green); }