/** Shopify CDN: Minification failed

Line 629:15 Expected identifier but found whitespace
Line 629:16 Unexpected "rgba("

**/
/* ================================================================
   assets/dcg-advanced-search.css
   Desert City Games — Advanced Search (Arsenal)
   Scoped: .dcg-as-* for section elements
           .dcg-sidebar (advanced search page only, via body.advanced_search)
           #shopify-section-advanced_search for BinderPOS card overrides
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=K2D:wght@600;700&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  --as-bg:        #161820;
  --as-panel:     rgba(255,255,255,0.03);
  --as-bd:        rgba(255,255,255,0.07);
  --as-bd-mid:    rgba(255,255,255,0.12);
  --as-bd-hi:     rgba(255,255,255,0.18);
  --as-orange:    #FF7A00;
  --as-o-dim:     rgba(255,122,0,0.12);
  --as-o-bd:      rgba(255,122,0,0.40);
  --as-o-foc:     rgba(255,122,0,0.50);
  --as-o-glow:    rgba(255,122,0,0.14);
  --as-t1:        rgba(255,255,255,0.92);
  --as-t2:        rgba(255,255,255,0.65);
  --as-t3:        rgba(255,255,255,0.40);
  --as-t4:        rgba(255,255,255,0.22);
  --as-inp:       rgba(255,255,255,0.05);
  --as-r:         12px;
  --as-r-sm:      8px;
  --as-font:      'Poppins', sans-serif;
  --as-font-h:    'K2D', sans-serif;
}

/* ── Section wrapper ────────────────────────────────────────────── */
.dcg-as-wrap {
  font-family: var(--as-font);
  color: var(--as-t1);
  padding-top: 24px;
}

/* ── Page header ────────────────────────────────────────────────── */
.dcg-as-header {
  margin-bottom: 24px;
}

.dcg-as-header__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--as-orange);
  margin: 0 0 6px;
}

.dcg-as-header__title {
  font-family: var(--as-font-h);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--as-t1);
  margin: 0 0 4px;
  line-height: 1.15;
}

.dcg-as-header__sub {
  font-size: 13px;
  color: var(--as-t3);
  margin: 0;
}

/* ── Search bar ─────────────────────────────────────────────────── */
.dcg-as-sbar-wrap {
  margin-bottom: 14px;
}

.dcg-as-sbar {
  display: flex;
  align-items: stretch;
  background: var(--as-inp);
  border: 1px solid var(--as-bd-mid);
  border-radius: var(--as-r);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dcg-as-sbar:focus-within {
  border-color: var(--as-o-foc);
  box-shadow: 0 0 0 3px var(--as-o-glow);
}

.dcg-as-sbar__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 12px 0 18px;
  color: var(--as-t3);
  pointer-events: none;
  transition: color 0.2s;
}

.dcg-as-sbar:focus-within .dcg-as-sbar__icon { color: var(--as-orange); }
.dcg-as-sbar__icon svg { width: 18px; height: 18px; display: block; }

.dcg-as-sbar__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 0;
  font-family: var(--as-font);
  font-size: 15px;
  color: var(--as-t1);
  caret-color: var(--as-orange);
  -webkit-appearance: none;
}

.dcg-as-sbar__input::placeholder { color: var(--as-t4); }
.dcg-as-sbar__input::-webkit-search-cancel-button { display: none; }

.dcg-as-sbar__clear {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 12px;
  color: var(--as-t3);
  transition: color 0.15s;
}

.dcg-as-sbar__clear:hover { color: var(--as-t1); }
.dcg-as-sbar__clear svg { width: 12px; height: 12px; display: block; }
.dcg-as-sbar.has-value .dcg-as-sbar__clear { display: flex; }

.dcg-as-sbar__submit {
  flex-shrink: 0;
  background: var(--as-orange);
  border: none;
  cursor: pointer;
  padding: 0 24px;
  min-height: 54px;
  font-family: var(--as-font);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s;
  white-space: nowrap;
}

.dcg-as-sbar__submit:hover { background: #e56e00; }
.dcg-as-sbar__submit svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 540px) {
  .dcg-as-sbar__label { display: none; }
  .dcg-as-sbar__submit { padding: 0 16px; }
}

/* ── Filter pills ───────────────────────────────────────────────── */
.dcg-as-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  min-height: 26px;
}

.dcg-as-pills:empty { display: none; }

.dcg-as-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--as-o-dim);
  border: 1px solid var(--as-o-bd);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--as-t1);
  font-family: var(--as-font);
  animation: as-pill-in 0.15s ease;
}

@keyframes as-pill-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.dcg-as-pill__cat {
  font-size: 9px;
  font-weight: 500;
  color: var(--as-t3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dcg-as-pill__val { font-weight: 500; }

.dcg-as-pill__rm {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: var(--as-orange);
  flex-shrink: 0;
  transition: background 0.15s;
}

.dcg-as-pill__rm:hover { background: rgba(255,122,0,0.22); }

.dcg-as-pills__clear-all {
  background: none;
  border: 1px solid var(--as-bd-mid);
  border-radius: 20px;
  padding: 4px 12px;
  font-family: var(--as-font);
  font-size: 11px;
  color: var(--as-t3);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.dcg-as-pills__clear-all:hover {
  border-color: var(--as-bd-hi);
  color: var(--as-t2);
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.dcg-as-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.dcg-as-toolbar__left { display: flex; align-items: center; gap: 10px; }
.dcg-as-toolbar__right { display: flex; align-items: center; }

/* Result count */
.dcg-as-count {
  font-family: var(--as-font);
  font-size: 12px;
  color: var(--as-t3);
}

/* BinderPOS loading dots */
.dcg-as-count .lds-facebook {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  height: 14px;
}

.dcg-as-count .lds-facebook > div {
  width: 4px;
  background: var(--as-orange);
  border-radius: 2px;
  animation: as-fb 1s ease infinite;
}

.dcg-as-count .lds-facebook > div:nth-child(1) { height: 8px;  animation-delay: 0s; }
.dcg-as-count .lds-facebook > div:nth-child(2) { height: 14px; animation-delay: 0.1s; }
.dcg-as-count .lds-facebook > div:nth-child(3) { height: 8px;  animation-delay: 0.2s; }

@keyframes as-fb {
  0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
  50%       { transform: scaleY(1);   opacity: 1; }
}

/* Sort select */
.dcg-as-sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.dcg-as-sort-label {
  font-size: 11px;
  color: var(--as-t3);
  font-family: var(--as-font);
  white-space: nowrap;
}

.dcg-as-sort {
  appearance: none;
  -webkit-appearance: none;
  background: var(--as-inp);
  border: 1px solid var(--as-bd-mid);
  border-radius: var(--as-r-sm);
  padding: 8px 28px 8px 12px;
  font-family: var(--as-font);
  font-size: 12px;
  color: var(--as-t2);
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
  min-width: 155px;
}

.dcg-as-sort:hover,
.dcg-as-sort:focus { border-color: var(--as-o-bd); color: var(--as-t1); }

.dcg-as-sort option { background: #1a1a1a; color: var(--as-t1); }

.dcg-as-sort-wrap::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 5px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--as-t3);
  pointer-events: none;
}

/* Prevent Select2 from hijacking #SortBy */
#SortBy + .select2-container { display: none !important; }

/* ── Collection / grid container ────────────────────────────────── */
.dcg-as-collection.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Card grid — dcg-collection scoping ─────────────────────────── */
/* The reshaper adds .dcg-collection to .products-display so all
   dcg-product-card.css rules fire correctly inside the search grid */
.dcg-as-grid.products-display.dcg-collection {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
  align-items: stretch;
}

/* Override Bootstrap column classes BinderPOS adds to card wrappers */
.dcg-as-grid .dcg-product-card-item,
.dcg-as-grid [class*="col-xs-"],
.dcg-as-grid [class*="col-sm-"],
.dcg-as-grid [class*="col-md-"],
.dcg-as-grid [class*="col-lg-"] {
  width: auto !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  flex: none !important;
}

/* Hide raw BinderPOS content before reshaper runs */
.dcg-as-grid .grid__item:not([data-dcg-reshaped]) .grid-view-item {
  visibility: hidden;
}
.dcg-as-grid .grid__item[data-dcg-reshaped] .grid-view-item {
  visibility: visible;
}

/* ── BinderPOS loading spinner ──────────────────────────────────── */
.dcg-as-grid .lds-ripple {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 64px auto;
  grid-column: 1 / -1;
}

.dcg-as-grid .lds-ripple div {
  position: absolute;
  border: 3px solid var(--as-orange);
  border-radius: 50%;
  opacity: 1;
  animation: as-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.dcg-as-grid .lds-ripple div:nth-child(2) { animation-delay: -0.5s; }

@keyframes as-ripple {
  0%   { top: 24px; left: 24px; width: 0;   height: 0;   opacity: 1; }
  100% { top: -2px; left: -2px; width: 52px; height: 52px; opacity: 0; }
}

/* ── Auto-advance spinner — shown silently while skipping sold-out pages ── */
.dcg-aa-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
  gap: 16px;
}

.dcg-aa-ripple {
  position: relative;
  width: 56px;
  height: 56px;
}

.dcg-aa-ripple div {
  position: absolute;
  border: 3px solid var(--as-orange);
  border-radius: 50%;
  opacity: 1;
  animation: as-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.dcg-aa-ripple div:nth-child(2) { animation-delay: -0.5s; }

.dcg-aa-msg {
  font-family: var(--as-font);
  font-size: 13px;
  color: var(--as-t3);
  margin: 0;
}

/* Error / empty state */
.dcg-as-grid > div[style*="text-align: center"] {
  grid-column: 1 / -1;
  padding: 60px 24px;
  color: var(--as-t2) !important;
  font-family: var(--as-font) !important;
  font-size: 14px !important;
}

/* ── Pagination ─────────────────────────────────────────────────── */
.dcg-as-pag-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.dcg-as-pag-text {
  font-size: 12px;
  color: var(--as-t3);
  font-family: var(--as-font);
  margin: 0;
}

.dcg-as-pag {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* BinderPOS writes <a> or <div.btn--disabled> into .pag_previous/.pag_next */
.dcg-as-pag .pag_previous a,
.dcg-as-pag .pag_next a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--as-panel);
  border: 1px solid var(--as-bd);
  border-radius: var(--as-r-sm);
  padding: 9px 18px;
  font-family: var(--as-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--as-t2);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dcg-as-pag .pag_previous a:hover,
.dcg-as-pag .pag_next a:hover {
  background: var(--as-o-dim);
  border-color: var(--as-o-bd);
  color: var(--as-t1);
}

.dcg-as-pag .pag_previous .btn--disabled,
.dcg-as-pag .pag_next .btn--disabled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--as-panel);
  border: 1px solid var(--as-bd);
  border-radius: var(--as-r-sm);
  padding: 9px 18px;
  font-family: var(--as-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--as-t4);
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.dcg-as-pag .material-icons {
  font-family: 'Material Icons' !important;
  font-size: 18px;
  line-height: 1;
}

/* ── Sidebar reskin (col-md-3) ──────────────────────────────────── */
/* Only applies on the advanced search page — theme adds body class
   "advanced_search" via {{ page.template_suffix }} in theme.liquid  */
/* ── Sidebar: BinderPOS filter panel ────────────────────────────────
   dcg-sidebar.css (loaded by sidebar.liquid) has many rules with
   !important. We need !important everywhere here to win the cascade.
─────────────────────────────────────────────────────────────────── */
body.advanced_search .dcg-sidebar {
  font-family: 'Poppins', sans-serif !important;
  background: #161820 !important;
}

/* Contain the injected .left-column.tag-filter panel */
body.advanced_search .dcg-sidebar .left-column.tag-filter {
  background: #161820 !important;
  border: none !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: none !important;
}

/* FILTER heading */
body.advanced_search .dcg-sidebar .label-filter.sidebar-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.40) !important;
  padding: 14px 16px 12px !important;
  border-bottom: none !important;
  display: block !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Force collapse always visible and pad it */
body.advanced_search .dcg-sidebar .left-inner.collapse,
body.advanced_search .dcg-sidebar #filter-container {
  display: block !important;
  background: #161820 !important;
  padding: 12px 14px 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Filter list stack */
body.advanced_search .dcg-sidebar .filters-toolbar__input {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: #161820 !important;
}

/* Section labels — override BinderPOS inline style='color:#27302f' */
body.advanced_search .dcg-sidebar .filters-toolbar__input label {
  font-family: 'Poppins', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 12px 0 5px !important;
  padding: 0 !important;
  border-top: none !important;
  display: block !important;
  width: 100% !important;
  background: transparent !important;
}

body.advanced_search .dcg-sidebar .filters-toolbar__input label:first-of-type {
  margin-top: 0 !important;
}

/* Inputs — exclude Select2's internal search field which lives inside .filters-toolbar__input
   but must NOT be styled as a standalone input box */
body.advanced_search .dcg-sidebar .filters-toolbar__input input:not(.select2-search__field),
body.advanced_search .dcg-sidebar .filters-toolbar__input input[type="text"]:not(.select2-search__field),
body.advanced_search .dcg-sidebar .filters-toolbar__input input[type="number"]:not(.select2-search__field) {
  width: 100% !important;
  max-width: 100% !important;
  background: #161820 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  height: auto !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.90) !important;
  outline: none !important;
  box-sizing: border-box !important;
  display: block !important;
  margin-top: 0 !important;
}

body.advanced_search .dcg-sidebar .filters-toolbar__input input[type="number"]:not(.select2-search__field) {
  border: 1px solid rgba(255,255,255,0.12) !important;
}

  border-color: rgba(255,122,0,0.50) !important;
  box-shadow: 0 0 0 2px rgba(255,122,0,0.14) !important;
}

body.advanced_search .dcg-sidebar .filters-toolbar__input input:not(.select2-search__field)::placeholder {
  color: rgba(255,255,255,0.25) !important;
}

/* Select2 inline search field — must be invisible inside the selection container */
body.advanced_search .dcg-sidebar .select2-search__field,
body.advanced_search .dcg-sidebar .select2-search--inline .select2-search__field {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: rgba(255,255,255,0.90) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 80px !important;
  height: auto !important;
}

/* THE FIX: Hide the inline-search <li> that creates a phantom empty row above placeholder.
   Select2 renders: <ul class="select2-selection__rendered">
     <li class="select2-search select2-search--inline">  ← this empty li is the top "box"
       <input class="select2-search__field">
     </li>
     <li class="select2-selection__placeholder">Browse All Sets</li>  ← second visible row
   </ul>
   With display:flex on the <ul>, both <li> elements stack visually = two rows.
   Hiding the search <li> collapses it — only the placeholder shows. */
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple .select2-search--inline {
  display: none !important;
}

/* Show placeholder text when no items are selected and search is hidden */
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  display: block !important;
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 34px !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

/* When items ARE selected, show inline search again so users can type to filter chips */
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple:has(.select2-selection__choice) .select2-search--inline {
  display: inline-block !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Price range grid */
body.advanced_search .dcg-sidebar .filters-toolbar__input > div[style*="grid"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Select2 hides native selects — don't interfere */

/* Prevent orphaned empty Select2 containers from showing as blank boxes */
body.advanced_search .dcg-sidebar .filters-toolbar__input label > .select2-container:not(:only-of-type),
body.advanced_search .dcg-sidebar .filters-toolbar__input label > .select2-container:empty {
  display: none !important;
}

/* ── Select2 dark theme ───────────────────────────────────────────── */
body.advanced_search .dcg-sidebar .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  display: block !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple,
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--single {
  background: #161820 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  min-height: 34px !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.advanced_search .dcg-sidebar .select2-container--default.select2-container--focus .select2-selection--single,
body.advanced_search .dcg-sidebar .select2-container--default.select2-container--focus .select2-selection--multiple,
body.advanced_search .dcg-sidebar .select2-container--default.select2-container--open .select2-selection--multiple,
body.advanced_search .dcg-sidebar .select2-container--default.select2-container--open .select2-selection--single,
body.advanced_search .dcg-sidebar .select2-container--default.select2-container--open .select2-selection,
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--single:focus,
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple:focus {
  border-color: rgba(255,122,0,0.50) !important;
  box-shadow: 0 0 0 2px rgba(255,122,0,0.14) !important;
  outline: none !important;
}

/* Kill any default white border/outline Select2 or browser applies */
body.advanced_search .dcg-sidebar .select2-container .select2-selection,
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--single,
body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple {
  outline: none !important;
}

/* The search box inside the open dropdown (appears as white input row) */
body.advanced_search .select2-dropdown .select2-search--dropdown {
  background: #161820 !important;
  padding: 6px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

body.advanced_search .select2-dropdown .select2-search--dropdown .select2-search__field {
  background: #161820 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.90) !important;
  outline: none !important;
  width: 100% !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  box-sizing: border-box !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: rgba(255,255,255,0.92) !important;
  line-height: 32px !important;
  padding-left: 10px !important;
  font-size: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: calc(100% - 24px) !important;
  display: block !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: rgba(255,255,255,0.55) !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0 6px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 34px !important;
  padding: 0 4px !important;
  margin: 0 !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: rgba(255,122,0,0.14) !important;
  border: 1px solid rgba(255,122,0,0.40) !important;
  border-radius: 20px !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 11px !important;
  padding: 2px 8px 2px 6px !important;
  margin: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.4 !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #FF7A00 !important;
  margin-right: 4px !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection__arrow {
  top: 6px !important;
}

body.advanced_search .dcg-sidebar .select2-container--default .select2-selection__arrow b {
  border-top-color: rgba(255,255,255,0.40) !important;
}

/* ── Select2 dropdown (renders outside sidebar via portal) ─────── */
body.advanced_search .select2-dropdown {
  background: #161820 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  z-index: 9999 !important;
}

body.advanced_search .select2-search--dropdown .select2-search__field {
  background: #1E2028 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 6px !important;
  color: rgba(255,255,255,0.90) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  outline: none !important;
  padding: 6px 10px !important;
}

body.advanced_search .select2-results__option {
  font-size: 12px !important;
  color: rgba(255,255,255,0.88) !important;
  padding: 7px 12px !important;
  font-family: 'Poppins', sans-serif !important;
  text-transform: capitalize !important;
  background: #161820 !important;
}

/* Results container — select2.min.css sets background:#fff here */
body.advanced_search .select2-results,
body.advanced_search .select2-results__options {
  background: #161820 !important;
}

/* Hover highlight */
body.advanced_search .select2-container--default .select2-results__option--highlighted,
body.advanced_search .select2-container--default .select2-results__option--highlighted[aria-selected],
body.advanced_search .select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background: rgba(255,122,0,0.20) !important;
  color: rgba(255,255,255,0.95) !important;
}

/* Currently selected option */
body.advanced_search .select2-container--default .select2-results__option[aria-selected="true"] {
  background: rgba(255,122,0,0.10) !important;
  color: #FF9A3C !important;
}

/* Scrollbar */
body.advanced_search .dcg-sidebar::-webkit-scrollbar { width: 4px; }
body.advanced_search .dcg-sidebar::-webkit-scrollbar-track { background: transparent; }
body.advanced_search .dcg-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .dcg-as-wrap { padding-top: 16px; }

  .dcg-as-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dcg-as-sort-label { display: none; }
  .dcg-as-sort { min-width: unset; width: auto; }

  .dcg-as-grid.products-display {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 420px) {
  .dcg-as-grid.products-display {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ================================================================
   MOBILE FILTER DRAWER  (advanced search page only)
   .sidebar_content stays in the DOM at all times so BinderPOS
   can initialise Select2 and inject filter options normally.
   We only reposition it off-screen with transform — no display:none.
   ================================================================ */

/* Filter button — mobile only */
.dcg-as-filter-btn {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--as-inp);
  border: 1px solid var(--as-bd-mid);
  border-radius: var(--as-r-sm);
  padding: 8px 14px;
  font-family: var(--as-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--as-t1);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dcg-as-filter-btn:hover {
  border-color: var(--as-o-bd);
  background: var(--as-o-dim);
}
.dcg-as-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--as-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

/* Backdrop */
.dcg-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 898;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Close button injected by JS */
.dcg-sidebar-close-btn {
  display: none;
}

@media (max-width: 991px) {

  .dcg-as-filter-btn {
    display: inline-flex;
  }

  .dcg-filter-backdrop {
    display: block;
  }

  /* Reposition sidebar as a fixed left drawer — NO display:none */
  body.advanced_search .sidebar_content {
    position: fixed !important;
    top: var(--dcg-mobile-bar-h, 64px) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 290px !important;
    max-width: 88vw !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #161820 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1) !important;
    /* kill Bootstrap column behaviour */
    float: none !important;
    padding: 0 !important;
    /* Keep it visually off-screen but present in DOM */
    visibility: visible !important;
    pointer-events: none !important;
  }

  /* Open state — slide in */
  body.advanced_search.dcg-filter-open .sidebar_content {
    transform: translateX(0) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.6) !important;
    pointer-events: auto !important;
  }

  /* Backdrop open state */
  body.advanced_search.dcg-filter-open .dcg-filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Give content column full width on mobile */
  body.advanced_search .normal_main_content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Close button inside drawer */
  .dcg-sidebar-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: #161820;
    cursor: pointer;
    margin-bottom: 4px;
    box-sizing: border-box;
  }
}
/* ================================================================
   Custom Set search bar (replaces Select2 on #setNames)
   ================================================================ */

.dcg-set-search {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.dcg-set-search__control {
  display: flex;
  align-items: center;
  background: #161820;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0 10px;
  cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.dcg-set-search.is-open .dcg-set-search__control,
.dcg-set-search__control:focus-within {
  border-color: rgba(255,122,0,0.50);
  box-shadow: 0 0 0 2px rgba(255,122,0,0.14);
}

.dcg-set-search__input {
  flex: 1;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: rgba(255,255,255,0.90) !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  padding: 7px 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
}

.dcg-set-search__input::placeholder { color: rgba(255,255,255,0.35); }

.dcg-set-search__chev {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;
  color: rgba(255,255,255,0.35);
  transition: transform 0.15s, color 0.15s;
  cursor: pointer;
  user-select: none;
}

.dcg-set-search.is-open .dcg-set-search__chev {
  transform: rotate(180deg);
  color: var(--as-orange);
}

/* ── Dropdown list ────────────────────────────────────────────── */
.dcg-set-search__dropdown {
  position: fixed;
  /* top / left / width set by JS positionDropdown() */
  background: #161820;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.dcg-set-search__item {
  padding: 7px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  transition: background 0.1s;
  text-transform: capitalize;
}

.dcg-set-search__item:hover          { background: rgba(255,122,0,0.12); color: rgba(255,255,255,0.95); }
.dcg-set-search__item.is-selected    { background: rgba(255,122,0,0.10); color: #FF9A3C; }
.dcg-set-search__item.is-selected:hover { background: rgba(255,122,0,0.22); }

.dcg-set-search__empty {
  padding: 10px 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

.dcg-set-search__dropdown::-webkit-scrollbar       { width: 4px; }
.dcg-set-search__dropdown::-webkit-scrollbar-track { background: transparent; }
.dcg-set-search__dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }

/* ── Selected chips ───────────────────────────────────────────── */
.dcg-set-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.dcg-set-search__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,122,0,0.14);
  border: 1px solid rgba(255,122,0,0.40);
  border-radius: 20px;
  padding: 2px 6px 2px 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
}

.dcg-set-search__chip-rm {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  color: #FF7A00;
  flex-shrink: 0;
  transition: color 0.15s;
}

.dcg-set-search__chip-rm:hover { color: #fff; }