:root{
  --batya-surface:#ffffff;
  --batya-border:#e7e1da;
  --batya-text:#272321;
  --batya-text-soft:#7b736d;
  --batya-accent:#ff6900;
}

.batya-catalog-filters{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-sizing:border-box;
  display:block;
}

.batya-catalog-filters__row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0 8px 6px;
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  scroll-padding-inline:8px;
  box-sizing:border-box;
}

.batya-catalog-filters__row::-webkit-scrollbar,
.batya-catalog-filters__current::-webkit-scrollbar{
  display:none;
}

.batya-catalog-filters__row > *{
  flex:0 0 auto;
  scroll-snap-align:start;
}

.batya-catalog-filters__current{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  flex-wrap:wrap;
  width:100%;
  min-width:0;
  margin:0;
  padding:2px 8px 1px;
  box-sizing:border-box;
}

.batya-catalog-filters__chip{
  display:inline-flex;
  align-items:center;
  gap:0;
  min-height:29px;
  padding:0 10px;
  border:1px solid #ece2d8;
  border-radius:999px;
  background:#fffdfa;
  color:#3b342e;
  box-shadow:none;
  font-size:12px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}

.batya-catalog-filters__chip:hover{
  border-color:#ddd1c6;
  background:#fcf7f2;
  color:#27211d;
}

.batya-catalog-filters__chip-label{
  color:#443a34;
  font-weight:600;
}

.batya-catalog-filters__chip-separator{
  margin-right:5px;
  color:#a09388;
  font-weight:600;
}

.batya-catalog-filters__chip-value{
  color:#7b6f65;
  font-weight:500;
}

.batya-catalog-filters__chip-remove{
  --batya-close-size:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  margin-left:6px;
  border-radius:999px;
  border:1px solid #eadfd5;
  background:#fffaf7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96);
  color:#958579;
  font-size:0;
  line-height:0;
  flex:0 0 auto;
  overflow:hidden;
  transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.batya-catalog-filters__chip:hover .batya-catalog-filters__chip-remove{
  border-color:#d9c9bc;
  background:#fff3ea;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
  color:#746254;
}

.batya-catalog-filters__chip--clear{
  border-color:#ddd3ca;
  background:#fffdfa;
  color:#6f655d;
}

.batya-catalog-filters__chip--clear:hover{
  border-color:#cfc2b5;
  background:#f7f1eb;
  color:#3f3934;
}

.batya-catalog-filters__chip-remove,
.batya-filter__summary-reset,
.catalog-mobile-panel__close,
.batya-filter__mobile-close{
  position:relative;
}

.batya-catalog-filters__chip-remove::before,
.batya-catalog-filters__chip-remove::after,
.batya-filter__summary-reset::before,
.batya-filter__summary-reset::after,
.catalog-mobile-panel__close::before,
.catalog-mobile-panel__close::after,
.batya-filter__mobile-close::before,
.batya-filter__mobile-close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:var(--batya-close-size,9px);
  height:1.35px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
}

.batya-catalog-filters__chip-remove::before,
.batya-filter__summary-reset::before,
.catalog-mobile-panel__close::before,
.batya-filter__mobile-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.batya-catalog-filters__chip-remove::after,
.batya-filter__summary-reset::after,
.catalog-mobile-panel__close::after,
.batya-filter__mobile-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.catalog-sort-control,
.batya-filter{
  position:relative;
  flex:0 0 auto;
}

.catalog-sort-control__toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:41px;
  min-width:41px;
  height:40px;
  min-height:40px;
  margin:0;
  padding:0;
  border:1px solid #ddd3ca;
  border-radius:14px;
  background:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 1px 1px rgba(17,17,17,.015);
  color:#2a231e;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.catalog-sort-control__toggle:hover{
  border-color:#d6c7bb;
  background:#fdf9f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.99), 0 1px 2px rgba(17,17,17,.03);
}

.catalog-sort-control.is-active .catalog-sort-control__toggle:hover{
  border-color:#dcc7b6;
  background:#fff7f1;
}

.catalog-sort-control__toggle:focus-visible{
  outline:none;
  border-color:#cdb6a3;
  box-shadow:0 0 0 3px rgba(205,182,163,.14);
}

.catalog-sort-control.is-active .catalog-sort-control__toggle{
  border-color:#e5d3c4;
  background:#fffaf6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.99), 0 1px 2px rgba(17,17,17,.025);
  color:#241d19;
}

.catalog-sort-control.is-open .catalog-sort-control__toggle,
.catalog-sort-control__toggle[aria-expanded="true"]{
  border-color:#e3c8b0;
  background:#fff7f0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.99), 0 2px 4px rgba(17,17,17,.04);
  color:#241d19;
  transform:translateY(0);
}

.catalog-sort-control__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  min-width:1em;
  font-size:19px;
  line-height:1;
  letter-spacing:-.02em;
  transform:translateY(-.5px);
}

.catalog-sort-control__backdrop{
  display:none;
}

.catalog-sort-panel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:130;
  width:312px;
  max-width:min(320px,calc(100vw - 16px));
  padding:0;
  border:1px solid #e6ddd5;
  border-radius:18px;
  background:var(--batya-surface);
  box-shadow:0 22px 42px rgba(17,17,17,.11), 0 2px 8px rgba(17,17,17,.04);
}

.catalog-sort-panel[hidden]{
  display:none !important;
}

.catalog-mobile-panel__inner{
  display:block;
}

.catalog-mobile-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(17,17,17,.06);
  background:#ffffff;
}

.catalog-mobile-panel__title-wrap{
  display:grid;
  gap:3px;
  min-width:0;
}

.catalog-mobile-panel__head strong{
  display:block;
  font-size:16px;
  line-height:1.2;
}

.catalog-mobile-panel__meta{
  display:block;
  color:var(--batya-text-soft);
  font-size:12px;
  line-height:1.3;
}

.catalog-mobile-panel__close{
  --batya-close-size:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid #e7dbcf;
  border-radius:12px;
  background:#fffaf7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
  color:#8f7c6d;
  font-size:0;
  line-height:0;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.catalog-sort-panel__ordering{
  padding:14px;
}

.catalog-sort-panel__field{
  display:grid;
  gap:8px;
}

.catalog-sort-panel__input{
  display:none;
}

.catalog-sort-list{
  display:grid;
  gap:6px;
}

.catalog-sort-list__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  min-height:44px;
  padding:0 14px;
  border:1px solid #efe6de;
  border-radius:14px;
  background:transparent;
  color:var(--batya-text);
  font-size:14px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.catalog-sort-list__item:hover{
  border-color:#e3d4c6;
  background:#faf7f3;
  transform:none;
}

.catalog-sort-list__item:focus-visible{
  outline:none;
  border-color:#111;
  box-shadow:0 0 0 3px rgba(17,17,17,.08);
}

.catalog-sort-list__item.is-selected{
  border-color:#e7c7ab;
  background:#fff7f0;
  color:#221d19;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(17,17,17,.03);
}

.catalog-sort-list__label{
  min-width:0;
}

.catalog-sort-list__check{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 auto;
  border:1px solid #e2d6cb;
  border-radius:999px;
  background:#fff;
  transition:border-color .16s ease, background .16s ease;
}

.catalog-sort-list__check::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--batya-accent);
  transform:scale(0);
  transition:transform .16s ease;
}

.catalog-sort-list__item.is-selected .catalog-sort-list__check{
  border-color:#efc6a7;
  background:#fff8f1;
}

.catalog-sort-list__item.is-selected .catalog-sort-list__check::after{
  transform:scale(1);
}

.batya-filter > summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:0 14px;
  border:1px solid #ddd4cb;
  border-radius:14px;
  background:#fffdfa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.97);
  color:#282320;
  font-size:13px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.batya-filter > summary::-webkit-details-marker{
  display:none;
}

.batya-filter > summary:hover{
  border-color:#d7cabd;
  background:#fcf8f4;
}

.batya-filter > summary::after{
  content:"";
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  opacity:.7;
}

.batya-filter[open] > summary::after{
  transform:rotate(-135deg) translateY(-1px);
}

.batya-filter.has-selection > summary{
  border-color:#e1c8b4;
  background:#fff8f3;
  color:#231d19;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
}

.batya-filter.has-selection > summary::after{
  display:none;
}

.batya-filter__badge{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  border:1px solid #ecd7c6;
  background:#fff9f4;
  color:#b96527;
  font-size:11px;
  font-weight:700;
  line-height:1;
  box-sizing:border-box;
  overflow:hidden;
}

.batya-filter__badge > span{
  display:block;
  line-height:1;
  transform:translateY(-0.5px);
}

.batya-filter__summary-reset{
  --batya-close-size:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border:1px solid #e8dbcf;
  border-radius:999px;
  background:#fffaf7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
  color:#917b6b;
  font-size:0;
  line-height:0;
  cursor:pointer;
  flex:0 0 auto;
  overflow:hidden;
  transition:border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.batya-filter__summary-reset:hover{
  border-color:#d6c2af;
  background:#fff3e8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.99);
  color:#7b6555;
}

.catalog-mobile-panel__close:hover,
.batya-filter__mobile-close:hover{
  border-color:#d6c2af;
  background:#fff3e8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.99);
  color:#7b6555;
}

.batya-filter__backdrop{
  display:none;
}

.batya-filter__panel{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:120;
  min-width:260px;
  max-width:min(340px,calc(100vw - 16px));
  padding:10px;
  border:1px solid var(--batya-border);
  border-radius:18px;
  background:var(--batya-surface);
  box-shadow:0 18px 34px rgba(17,17,17,.10), 0 2px 8px rgba(17,17,17,.04);
}

.batya-filter[open] .batya-filter__panel{
  display:block;
}

.batya-filter__mobile-head{
  display:none;
}

.batya-filter__mobile-title{
  font-size:16px;
  line-height:1.2;
}

.batya-filter__mobile-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.batya-filter__mobile-reset,
.batya-filter__mobile-close{
  display:none;
}

.batya-filter__list{
  display:grid;
  gap:4px;
  max-height:280px;
  overflow:auto;
}

.batya-filter__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:34px;
  padding:4px 8px;
  border-radius:12px;
  font-size:14px;
  transition:background .16s ease, box-shadow .16s ease;
}

.batya-filter__item:hover{
  background:rgba(17,17,17,.028);
}

.batya-filter__item.is-selected{
  background:linear-gradient(180deg,rgba(255,105,0,.055) 0%,rgba(255,105,0,.025) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,105,0,.07);
}

.batya-filter__item.is-empty .batya-filter__count{
  opacity:.55;
}

.batya-filter__check{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.batya-filter__check input{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
  width:16px;
  height:16px;
  border:1.5px solid #d7cec6;
  border-radius:5px;
  background:#fff;
  display:inline-grid;
  place-content:center;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.batya-filter__check input::after{
  content:"";
  width:8px;
  height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .14s ease;
}

.batya-filter__check input:hover{
  border-color:#ccb9aa;
}

.batya-filter__check input:checked{
  border-color:var(--batya-accent);
  background:var(--batya-accent);
  box-shadow:0 0 0 3px rgba(255,105,0,.07);
}

.batya-filter__check input:checked::after{
  transform:rotate(-45deg) scale(1);
}

.batya-filter__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.batya-filter__count{
  color:var(--batya-text-soft);
  font-size:12px;
  white-space:nowrap;
}

.batya-filter__divider{
  height:1px;
  margin:8px 0 6px;
  background:var(--batya-border);
  opacity:.9;
}

.batya-filter__actions,
.batya-catalog-filters__actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:12px;
  margin-top:12px;
  border-top:1px solid var(--batya-border);
}

.batya-filter__done,
.batya-catalog-filters__apply{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border:0;
  border-radius:14px;
  background:#111;
  color:#fff;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}

.batya-filter__done{
  width:100%;
}

.batya-catalog-filters.is-submitting{
  opacity:.72;
  pointer-events:none;
  transition:opacity .15s ease;
}

@media (min-width:768px){
  .batya-catalog-filters__row{
    flex-wrap:nowrap;
    overflow:visible;
    scroll-snap-type:none;
  }

  .batya-catalog-filters__current{
    padding:2px 8px 1px;
  }

  .catalog-sort-control.is-open{
    z-index:150;
  }

  .batya-filter[open]{
    z-index:140;
  }
}

@media (max-width:767px){
  .batya-catalog-filters__current{
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-padding-inline:8px;
  }

  .batya-catalog-filters__chip{
    min-height:30px;
    padding:0 10px;
  }

  .batya-catalog-filters__current > *{
    flex:0 0 auto;
    scroll-snap-align:start;
  }

  .catalog-sort-control{
    position:static;
  }

  .catalog-sort-control.is-open{
    z-index:10070;
  }

  .catalog-sort-control.is-open .catalog-sort-control__backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:10070;
    border:0;
    padding:0;
    background:rgba(17,17,17,.28);
  }

  .catalog-sort-panel{
    position:fixed;
    inset:auto 0 0;
    z-index:10080;
    width:100%;
    max-width:none;
    border:0;
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 30px rgba(0,0,0,.16);
  }

  .catalog-mobile-panel__head{
    padding:14px 14px 12px;
  }

  .catalog-sort-panel__ordering{
    padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
  }

  .batya-filter{
    position:static;
  }

  .batya-filter[open]{
    z-index:10070;
  }

  .batya-filter[open] .batya-filter__backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:10070;
    border:0;
    padding:0;
    background:rgba(17,17,17,.28);
  }

  .batya-filter__panel{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:10080;
    min-width:0;
    max-width:none;
    width:100%;
    max-height:min(78vh,640px);
    padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
    border:0;
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 30px rgba(0,0,0,.16);
  }

  .batya-filter__mobile-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 0 12px;
    margin:0 0 12px;
    border-bottom:1px solid rgba(17,17,17,.06);
  }

  .batya-filter__mobile-reset{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    background:transparent;
    color:var(--batya-text-soft);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
  }

  .batya-filter__mobile-close{
    --batya-close-size:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--batya-border);
    border-radius:12px;
    background:#fff;
    color:#111;
    font-size:0;
    line-height:0;
    cursor:pointer;
    overflow:hidden;
  }

  .batya-filter__list{
    max-height:calc(78vh - 148px);
    padding-right:2px;
  }

  body.batya-filter-sheet-open{
    overflow:hidden;
  }
}
