/* ===== DESKTOP ONLY ===== */
@media (min-width: 861px) {

:root{
  --w: 312px;
  --radius: 8px;

  --head-h: 38px;
  --row-h: 35px;

  --head-bg:#fff;
  --head-shadow:0 2px 18px rgba(0,0,0,.06);

  --row-even:#C5C9D6;
  --row-odd:#ffffff;
  --row-text:#111;
  --row-hover:#616161;

  --scroll-track:#2f2f2f;
  --scroll-thumb:#d7d7d7;

  --panel-left: 0px;
  --panel-width: 100%;

  --slide-dur: 45ms;
  --slide-ease: cubic-bezier(.2,.9,.2,1);

  --gap: 16px;
}

body{ margin:0; }
.filter_box{
  background-color: #2E364F;
  padding:21px;
  color:#000;
  position:relative;
  isolation:isolate;
  z-index:0;
  border-radius: 20px;
}

.row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  overflow:visible;
}
.row + .row{ margin-top: var(--gap); }

.col-split{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap: var(--gap);
  overflow:visible;
}
.col-split > .dropdown,
.col-split > .range-dd{ width:100%; }

.dropdown,
.range-dd{ width:100%; overflow:visible; }

.dd-inner{
  background:var(--row-odd);
  border-radius:0 0 var(--radius) var(--radius);
  max-height:310px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
  scrollbar-width:thin;
}
.dd-inner::-webkit-scrollbar{width:10px}
.dd-inner::-webkit-scrollbar-track{background:var(--scroll-track)}
.dd-inner::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px}

.dd-options{list-style:none;margin:0;padding:0}
.dd-row{
  height:var(--row-h);
  padding:0 17px;
  display:flex;align-items:center;
  color:var(--row-text);
  background:var(--row-odd);
  cursor:pointer;user-select:none;
  font-weight:500;
  font-size:12px;
  line-height:var(--row-h);
}
.dd-options .dd-row:nth-child(even){background:var(--row-even)}
.dd-row:hover{color:#B22234}
.dd-reset{position:sticky;top:0;z-index:2;background:#392237;color:#fff}
.dd-reset:hover{color:#FFB900}

.dropdown{ position:relative; }
.dd-head{
  all:unset;
  display:block;
  width:100%;
  box-sizing:border-box;
  background:var(--head-bg);
  border-radius:var(--radius);
  box-shadow:var(--head-shadow);
  height:var(--head-h);
  padding:0 47px 0 17px;
  cursor:pointer;
  position:relative;
  z-index:2;
  font-weight:400;
  font-size:12px;
  line-height:var(--head-h);
}
.dd-head::after{
  content:"";
  position:absolute;
  right:17px; top:50%;
  width:13px; height:8px;
  background:url("/static/icons/arrow_yellow.svg") center/contain no-repeat;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .075s ease;
}
.dropdown.open .dd-head::after{ transform:translateY(-50%) rotate(180deg); }
.dd-text{ font-weight:400; }

.dd-panel{
  position:absolute; left:0; right:0; top:100%;
  z-index:1;
}
.dd-panel[hidden]{ display:none; }

.range-dd{ position:relative; overflow:visible; }
.range-head{
  all:unset;
  display:flex; align-items:center; justify-content:space-between;
  width:100%; box-sizing:border-box;
  background:var(--head-bg);
  border-radius:var(--radius);
  box-shadow:var(--head-shadow);
  height:var(--head-h);
  padding:0;
  cursor:default;
  position:relative;
  z-index:2;
  font-weight:400; font-size:12px; line-height:var(--head-h);
}
.range-head .slot{
  flex:1; display:flex; align-items:center; gap:6px;
  padding-left:17px;
  padding-right:17px;
  cursor:pointer; user-select:none;
}
.range-head .slot .slot-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.range-head .divider{
  flex:0 0 1px; width:1px; height:20px;
  background:#cfcfcf; opacity:.7; border-radius:1px;
  align-self:center;  
}
.range-head .chev{
  display:inline-block; width:13px; height:8px;
  background:url("/static/icons/arrow_yellow.svg") center/contain no-repeat;
  transform:rotate(0deg);
  transition:transform .075s ease;
  margin-left:auto;
}
.range-dd.open-from .slot-from .chev{ transform:rotate(180deg); }
.range-dd.open-to   .slot-to   .chev{ transform:rotate(180deg); }

.range-panel{
  position:absolute; top:100%;
  left:var(--panel-left); width:var(--panel-width);
  z-index:1;
}
.range-panel[hidden]{ display:none; }

.dropdown.open .dd-head{ z-index: 101; }
.dropdown.open .dd-panel{ z-index: 100; }
.range-dd.open-from .range-head,
.range-dd.open-to   .range-head{ z-index: 101; }
.range-dd.open-from .panel-from,
.range-dd.open-to   .panel-to  { z-index: 100; }

.dd-panel,
.range-panel{
  opacity:0;
  transform:translateY(-6px);
  transition:
    transform var(--slide-dur) var(--slide-ease),
    opacity   var(--slide-dur) linear;
  will-change:transform, opacity;
  pointer-events:none;
}
.dropdown.open .dd-panel,
.range-dd.open-from .panel-from,
.range-dd.open-to   .panel-to{
  opacity:1; transform:translateY(0); pointer-events:auto;
  z-index:30;
}

.dropdown .dd-panel::before,
.range-dd .range-panel::before{
  content:"";
  position:absolute; left:0; right:0;
  top: calc(-1 * var(--gap));
  height: var(--gap);
  background:#392237; pointer-events:none;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
  z-index:-1;
}

.dd-head.cbx{
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items:center;
  gap:8px;
  padding:2px;
  width:auto; height:auto;
  line-height:1.2;
  justify-self:start;
  color:#fff;
  cursor:pointer;
}
.dd-head.cbx::after{ content:none; }

.cbx-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0; height:0;
}

.cbx-icon{
  flex:0 0 26px;
  width:20px; height:20px;
  background: center / contain no-repeat url("/static/icons/check_box_off.svg");
  transition: transform 100ms ease, filter 100ms ease, box-shadow 100ms ease, opacity 100ms ease;
  will-change: transform, filter, box-shadow, opacity;
}

.dd-head.cbx:hover .cbx-input:not(:checked) + .cbx-icon{
  background-image:url("/static/icons/check_box_hover.svg");
  transform: scale(1.03);
  width:26px; height:26px;
}

.cbx-input:checked + .cbx-icon{
  background-image:url("/static/icons/check_box_on.svg");
  transform: scale(1.06);
  width:26px; height:26px;
}

.cbx-input:focus-visible + .cbx-icon{
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

.cbx-text{ white-space:nowrap; }

@media (prefers-reduced-motion: reduce){
  .cbx-icon{
    transition: none;
  }
}

.dd-head.btn-show{
  width:145px !important;
  height:38px !important;
  background:#F5F5F5 !important;
  color:#111 !important;
  font-weight:600;
  font-size:15px;
  line-height:38px;
  padding:0 16px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;
  border-radius:8px;
}

.dd-head.btn-show::after{ content:none !important; }

/* tablet tweaks */
@media (max-width:1024px){
  .row{ grid-template-columns:repeat(2,1fr); }
}
/* mobile tweaks (не сработают внутри desktop-обёртки, оставлены как есть) */
@media (max-width:640px){
  .row{ grid-template-columns:1fr; }
  .col-split{ grid-template-columns:1fr; }
}

.filter_box .row:nth-of-type(4) .btn-show{
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.filter_box_new_old .segmented{
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  box-shadow: none;
  width: fit-content;
  padding: 25px 0 19px 13px;
}

.filter_box_new_old .segmented input[type="radio"]{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.filter_box_new_old .segmented .seg{
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 14px;
  border:1px solid transparent;
  font-size: 16px;
  font-weight: 500;
  color: #A2A2A2;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.filter_box_new_old .segmented input[type="radio"]:checked + .seg{
  color: #F5F5F5;
  border-radius: 8px;
  border:1px solid #F5F5F5;
}

.filter_box_new_old .segmented .seg:hover{
  filter: brightness(0.98);
}
.filter_box_new_old .segmented input[type="radio"]:checked + .seg:hover{
  filter: brightness(1.02);
}

.filter_box_new_old .segmented input[type="radio"]:focus-visible + .seg{
  outline: 2px solid rgba(0,0,0,.15);
  outline-offset: 2px;
}

} /* /@media (min-width: 861px) */