/* ✦ NEW — Product listing 2.0 (Dark 2.0 package): heading, toolbar, filter window and sort menu.
   Every rule is scoped to .dx-list-head / .dx-listing, which only the Dark 2.0 branch of the
   category and products templates renders, so the classic listing is untouched. */

.dx-list-head,
.dx-listing {
  /* Fallbacks; the templates set these from the store's own colour settings */
  --dx-list-accent: #bb9e7b;
  --dx-list-fg: #fff;
  --dx-list-line: color-mix(in srgb, var(--dx-list-fg) 14%, transparent);
  --dx-list-surface: #1b1919;
  --dx-list-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Heading ---------- */
.dx-list-head {
  padding-top: 40px;
  padding-bottom: 8px;
}

.dx-list-head a { color: inherit; text-decoration: none; }

.dx-list-head__crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-size: .85rem;
  opacity: .6;
}

.dx-list-head__crumb a:hover { opacity: 1; color: var(--dx-list-accent); }

.dx-list-head__title {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.dx-list-head__desc {
  max-width: 680px;
  margin: 14px 0 0;
  font-size: 1rem;
  line-height: 1.85;
  opacity: .7;
  text-wrap: pretty;
}

.dx-list-head__subs {
  display: flex;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0 0 4px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.dx-list-head__subs::-webkit-scrollbar { display: none; }

.dx-list-head__subs a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 18px;
  border: 1px solid var(--dx-list-line);
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .25s, color .25s;
}

.dx-list-head__subs a:has(img) { padding-inline-start: 4px; }

.dx-list-head__subs img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.dx-list-head__subs a:hover { border-color: var(--dx-list-accent); color: var(--dx-list-accent); }

/* ---------- Toolbar ---------- */
.dx-listing .products-filter {
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dx-list-line);
}

/* The small captions above the buttons repeat the button text */
.dx-listing .filter-result,
.dx-listing .filter-order {
  display: none;
}

.dx-listing .filter-buttons-container {
  align-items: center;
  gap: 10px;
}

.dx-listing .dark-btn-filter {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  min-width: 0;
  padding: 0 22px;
  border: 1px solid var(--dx-list-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: inherit !important;
  font-size: .95rem;
  font-weight: 600;
  box-shadow: none !important;
  transition: border-color .25s, color .25s;
}

/* Keep Bootstrap's show/hide classes winning over the inline-flex above */
@media (max-width: 991.98px) {
  .dx-listing .dark-btn-filter.d-none { display: none !important; }
}

@media (min-width: 992px) {
  .dx-listing .dark-btn-filter.d-lg-none { display: none !important; }
}

.dx-listing .dark-btn-filter:hover,
.dx-listing .dark-btn-filter[aria-expanded="true"] {
  border-color: var(--dx-list-accent) !important;
  color: var(--dx-list-accent) !important;
}

.dx-listing .dark-btn-filter:focus-visible {
  outline: 2px solid var(--dx-list-accent);
  outline-offset: 3px;
}

.dx-listing .dark-btn-filter i { font-size: 1rem; color: inherit !important; }

.dx-listing .filter-block-width,
.dx-listing .sort-block-width { width: auto !important; }

.dx-listing .products-filter > .text-color-primary {
  color: inherit !important;
  opacity: .65;
  font-size: .95rem;
}

.dx-listing #product-filter-count { color: var(--dx-list-accent); opacity: 1; }

/* ---------- Sort menu ---------- */
.dx-listing .select-dropdown {
  min-width: 230px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--dx-list-line);
  border-radius: 16px;
  background: var(--dx-list-surface);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  text-align: start;
}

.dx-listing .select-dropdown .dropdown-item {
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--dx-list-fg) !important;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.dx-listing .select-dropdown .dropdown-item:hover,
.dx-listing .select-dropdown .dropdown-item:focus {
  background: color-mix(in srgb, var(--dx-list-fg) 8%, transparent);
  color: var(--dx-list-accent) !important;
}

/* ---------- Filter window (and the phone's inline filter) ---------- */
.dx-listing #filterModal .modal-dialog { max-width: 520px; }

.dx-listing #filterModal .modal-content {
  border: 1px solid var(--dx-list-line);
  border-radius: 24px;
  background: var(--dx-list-surface);
  color: var(--dx-list-fg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.dx-listing #filterModal .modal-body { padding: 32px; }

.dx-listing #filterModal .close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--dx-list-line);
  border-radius: 50%;
  color: var(--dx-list-fg);
  opacity: .8;
  text-shadow: none;
}

.dx-listing #filterModal .close:hover { opacity: 1; border-color: var(--dx-list-accent); color: var(--dx-list-accent); }

.dx-listing .form-products-filter { color: var(--dx-list-fg); }

.dx-listing .form-products-filter > span:first-child {
  display: block;
  margin-bottom: 18px;
  color: var(--dx-list-fg) !important;
  font-size: 1.15rem;
}

.dx-listing .form-products-filter label {
  margin-bottom: 8px;
  color: var(--dx-list-fg);
  font-size: .85rem;
  opacity: .7;
}

.dx-listing .form-products-filter .form-control {
  height: 48px;
  border: 1px solid var(--dx-list-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--dx-list-fg) 4%, transparent);
  color: var(--dx-list-fg);
  box-shadow: none;
}

.dx-listing .form-products-filter .form-control::placeholder { color: var(--dx-list-fg); opacity: .4; }

.dx-listing .form-products-filter .form-control:focus { border-color: var(--dx-list-accent); }

.dx-listing .form-products-filter .btn-sale-price {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--dx-list-fg);
  opacity: 1;
}

.dx-listing .form-products-filter .custom-checkbox-label { color: var(--dx-list-fg) !important; font-size: .95rem; }

.dx-listing .form-products-filter .custom-checkmark {
  border-color: color-mix(in srgb, var(--dx-list-fg) 40%, transparent) !important;
  border-radius: 6px;
  background: transparent;
}

.dx-listing .form-products-filter .form-group { gap: 10px; margin-top: 28px !important; }

.dx-listing #products-list-filter-form-save,
.dx-listing #products-list-filter-form-clear {
  min-height: 48px;
  border-radius: 999px !important;
  font-weight: 700;
  transition: background-color .25s, color .25s, border-color .25s;
}

.dx-listing #products-list-filter-form-save {
  flex: 1 1 auto;
  border: 1px solid var(--dx-list-accent) !important;
  background: var(--dx-list-accent) !important;
  color: #161313 !important;
}

.dx-listing #products-list-filter-form-save:hover { background: transparent !important; color: var(--dx-list-accent) !important; }

.dx-listing #products-list-filter-form-clear {
  border: 1px solid var(--dx-list-line) !important;
  background: transparent !important;
  color: var(--dx-list-fg) !important;
}

.dx-listing #products-list-filter-form-clear:hover { border-color: var(--dx-list-fg) !important; }

/* Price range slider (jQuery UI) */
.dx-listing .form-products-filter .ui-slider {
  height: 4px;
  border: 0;
  border-radius: 4px;
  background: var(--dx-list-line);
}

.dx-listing .form-products-filter .ui-slider-range { background: var(--dx-list-accent); }

.dx-listing .form-products-filter .ui-slider-handle {
  top: -8px;
  width: 20px;
  height: 20px;
  border: 3px solid var(--dx-list-accent);
  border-radius: 50%;
  background: var(--dx-list-surface);
  cursor: grab;
}

@media (max-width: 767.98px) {
  .dx-list-head { padding-top: 24px; }
  .dx-listing .products-filter { margin-bottom: 20px; padding-bottom: 16px; }
  .dx-listing .dark-btn-filter { height: 44px; padding: 0 18px; }
  /* Filter and sort share the row */
  .dx-listing .filter-buttons-container { flex: 1 1 auto; }
  .dx-listing .filter-buttons-container > div { flex: 1 1 0; min-width: 0; font-size: 0; } /* drops the   spacers */
  .dx-listing .filter-buttons-container .dropdown { display: block !important; }
  .dx-listing .filter-buttons-container .dark-btn-filter:not(.d-none) { width: 100% !important; }
  .dx-listing #filters-form-collapse-sm .form-products-filter {
    padding: 20px;
    border: 1px solid var(--dx-list-line);
    border-radius: 18px;
    background: var(--dx-list-surface);
  }
}

/* A mouse click or tap leaves no browser focus box; keyboard users still get the focus-visible outline */
:where(.dx-list-head, .dx-listing) :is(a, button, summary, input, select, textarea, video, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}