:root { --tf-bar-h: 68px; }

/* Catalog filters - tabys-km.kz / xcmg-cn.kz / xgma-cn.kz.
 *
 * One set of controls, two presentations:
 *   >= 992px  a sticky left sidebar beside the product grid
 *   <  992px  a bottom sheet raised by a sticky bottom bar
 * The same inputs serve both, so there are no duplicate controls to keep in
 * sync and the filtering JS does not care which layout is active.
 *
 * Skin colours come from the --tf-* custom properties; each site overrides
 * them in its own template. */

.tf,
.tf-toolbar,
.tf-bottombar,
.tf-empty {
  --tf-accent: #d32027;
  --tf-ink: #14181f;
  --tf-muted: #6b7480;
  --tf-line: #e2e6ec;
  --tf-surface: #fff;
  --tf-soft: #f5f7fa;
  --tf-radius: 10px;
  --tf-bar-h: 68px;
  color: var(--tf-ink);
  font-size: 15px;
}

.tf *,
.tf-toolbar *,
.tf-bottombar *,
.tf-empty * { box-sizing: border-box; }

/* ---- two-column shell -------------------------------------------------- */
.tf-layout {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.tf-results {
  flex: 1 1 auto;
  min-width: 0;               /* lets the grid shrink instead of overflowing */
}

.tf {
  flex: 0 0 252px;
  width: 252px;
  padding: 16px 15px;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  display: flex;
  flex-direction: column;
}

.tf__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -15px;          /* matches .tf padding so scrollbar sits at the edge */
  padding: 0 15px;
}

/* ---- search ------------------------------------------------------------ */
.tf__search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}

.tf__search svg {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--tf-muted);
  pointer-events: none;
}

.tf__search input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: var(--tf-soft);
  border: 1px solid transparent;
  border-radius: var(--tf-radius);
  outline: none;
}

.tf__search input:focus {
  background: var(--tf-surface);
  border-color: var(--tf-accent);
}

/* ---- groups ------------------------------------------------------------ */
.tf__group {
  min-width: 0;
  margin: 0 0 13px;
  padding: 0 0 13px;
  border: 0;
  border-bottom: 1px solid var(--tf-line);
}

.tf__group:last-of-type { border-bottom: 0; padding-bottom: 0; }

.tf__group legend {
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tf-muted);
  float: none;
}

.tf__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* position:relative matters - the input is absolutely positioned, and without
   a positioned ancestor it anchors to the page instead of the chip, throwing
   the focus ring across the layout when tabbing through. */
.tf__chip { position: relative; margin: 0; cursor: pointer; }

.tf__chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tf__chip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  background: var(--tf-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
}

.tf__chip span em {
  font-style: normal;
  font-size: 12px;
  color: var(--tf-muted);
}

.tf__chip:hover span { border-color: var(--tf-line); }
.tf__chip input:focus-visible + span { outline: 2px solid var(--tf-accent); outline-offset: 2px; }

.tf__chip input:checked + span {
  color: #fff;
  background: var(--tf-accent);
  border-color: var(--tf-accent);
}

.tf__chip input:checked + span em { color: rgba(255, 255, 255, .75); }

.tf__range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tf__range input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: var(--tf-soft);
  border: 1px solid transparent;
  border-radius: 8px;
  outline: none;
}

.tf__range input:focus {
  background: var(--tf-surface);
  border-color: var(--tf-accent);
}

.tf__dash { color: var(--tf-muted); }

.tf__hint {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: .8;
}

.tf__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--tf-muted);
  cursor: pointer;
}

.tf__check input { width: 15px; height: 15px; accent-color: var(--tf-accent); }

.tf__reset {
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--tf-accent);
  background: transparent;
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius);
  cursor: pointer;
}

.tf__reset:hover { border-color: var(--tf-accent); }

.tf__foot {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tf-line);
}

.tf__foot .tf__reset { width: 100%; }

/* sheet chrome - mobile only */
.tf__sheet-head,
.tf__sheet-foot { display: none; }

/* ---- toolbar above the grid ------------------------------------------- */
.tf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.tf-toolbar__count { margin: 0; font-size: 14px; color: var(--tf-muted); }
.tf-toolbar__count b { color: var(--tf-ink); }

.tf-toolbar__sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tf-toolbar__sort label {
  margin: 0;
  font-size: 13px;
  color: var(--tf-muted);
  white-space: nowrap;
}

.tf-toolbar__sort select {
  height: 42px;
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  color: inherit;
  background: var(--tf-soft);
  border: 1px solid transparent;
  border-radius: var(--tf-radius);
  cursor: pointer;
}

/* ---- empty state ------------------------------------------------------- */
.tf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 44px 20px;
  text-align: center;
  background: var(--tf-soft);
  border-radius: 12px;
}

.tf-empty[hidden] { display: none; }
.tf-empty strong { font-size: 18px; }
.tf-empty span { font-size: 14px; color: var(--tf-muted); }
.tf-empty .tf__reset { margin-top: 8px; }

/* a card hidden by the filters */
[data-tf-hidden] { display: none !important; }

/* ---- backdrop and bottom bar (mobile) ---------------------------------- */
.tf-backdrop,
.tf-bottombar { display: none; }

/* ======================================================================== */
/* mobile: sidebar becomes a bottom sheet                                   */
/* ======================================================================== */
@media (max-width: 991.98px) {
  .tf-layout { display: block; }

  .tf {
    position: fixed;
    z-index: 1080;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 86vh;
    padding: 0;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .22);
    transform: translateY(101%);
    transition: transform .26s ease;
    visibility: hidden;
  }

  .tf.is-open { transform: translateY(0); visibility: visible; }

  .tf__sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--tf-line);
  }

  .tf__sheet-head strong { font-size: 17px; }

  .tf__sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--tf-muted);
    background: var(--tf-soft);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .tf__sheet-close svg { width: 17px; height: 17px; }

  .tf__scroll {
    flex: 1 1 auto;
    margin: 0;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .tf__foot { display: none; }

  .tf__sheet-foot {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--tf-surface);
    border-top: 1px solid var(--tf-line);
  }

  .tf__sheet-foot .tf__reset { flex: 0 0 auto; }

  .tf__apply {
    flex: 1 1 auto;
    height: 46px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--tf-accent);
    border: 0;
    border-radius: var(--tf-radius);
    cursor: pointer;
  }

  .tf-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(10, 14, 20, .45);
    opacity: 0;
    transition: opacity .26s ease;
  }

  .tf-backdrop[hidden] { display: none; }
  .tf-backdrop.is-open { opacity: 1; }

  /* sticky bar that raises the sheet */
  .tf-bottombar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    z-index: 1060;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--tf-surface);
    border-top: 1px solid var(--tf-line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .10);
  }

  /* the button is sized to its label so the sort control gets the rest -
     "Сначала дешевле" does not fit in half of a 390px screen */
  .tf-bottombar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 0 15px;
    height: 46px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--tf-accent);
    border: 0;
    border-radius: var(--tf-radius);
    cursor: pointer;
  }

  .tf-bottombar__btn svg { width: 18px; height: 18px; }

  .tf-bottombar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tf-accent);
    background: #fff;
    border-radius: 999px;
  }

  .tf-bottombar__badge[hidden] { display: none; }

  .tf-bottombar__sort {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    margin: 0;
  }

  /* appearance:none removes the native arrow, so draw one back */
  .tf-bottombar__sort::after {
    content: '';
    position: absolute;
    right: 12px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--tf-muted);
    border-bottom: 2px solid var(--tf-muted);
    transform: translateY(-2px) rotate(45deg);
    pointer-events: none;
  }

  .tf-bottombar__sort svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--tf-muted);
    pointer-events: none;
  }

  .tf-bottombar__sort select {
    width: 100%;
    min-width: 0;
    height: 46px;
    padding: 0 26px 0 34px;
    text-overflow: ellipsis;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: inherit;
    background: var(--tf-soft);
    border: 1px solid var(--tf-line);
    border-radius: var(--tf-radius);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }

  /* the toolbar's own sort is redundant once the bar carries one */
  .tf-toolbar__sort { display: none; }
  .tf-toolbar { margin-bottom: 14px; }

  /* keep the bar clear of page content and of the site's floating buttons */
  body.tf-has-bottombar { padding-bottom: var(--tf-bar-h); }
  body.tf-has-bottombar .whatsapp,
  body.tf-has-bottombar .phone { bottom: calc(var(--tf-bar-h) + 14px); }
  body.tf-sheet-open { overflow: hidden; }
}

@media (max-width: 400px) {
  .tf-bottombar__btn,
  .tf-bottombar__sort select { font-size: 14px; }
}