/* ==========================================================================
   TILTO — katalogas: filtrai, įrankių juosta, sąrašas
   ========================================================================== */

.t-catalog { padding-block: var(--t-s5) var(--t-s8); }

/* .t-breadcrumb perkelta i components.css: takas dabar rodomas ir
   puslapiuose bei straipsniuose, o catalog.css uzkraunama tik parduotuveje. */

.t-catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--t-s4);
  margin-bottom: var(--t-s6);
}

.t-catalog__count { color: var(--t-ink-soft); font-size: var(--t-fs-sm); }

.t-catalog__layout { display: grid; gap: var(--t-s6); }

@media (min-width: 1000px) {
  .t-catalog__layout { grid-template-columns: 248px minmax(0, 1fr); gap: var(--t-s7); }
}

/* --- filtrai ------------------------------------------------------------- */

.t-filters__head {
  display: flex;
  align-items: center;
  gap: var(--t-s3);
  padding-bottom: var(--t-s3);
  border-bottom: 1px solid var(--t-line);
}

.t-filters__title { font-size: var(--t-fs-h3); margin-right: auto; }
.t-filters__reset { font-size: var(--t-fs-xs); }
.t-filters__close, .t-filters__foot { display: none; }

/* Filtrai kaupiami ir taikomi vienu kartu, todėl kompiuteryje juosta su
   „Rodyti rezultatus“ atsiranda tik tada, kai yra ką taikyti. Ji prilimpa
   prie ekrano apačios: filtrų sąrašas ilgas, ir nuslinkus žemyn mygtukas
   kitaip liktų nematomas. */
.t-filters.has-pending .t-filters__foot {
  display: block;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: var(--t-s4);
  padding-block: var(--t-s4);
  border-top: 1px solid var(--t-line);
  background: var(--t-surface);
}

.t-filters__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--t-s2);
}

.t-filters__apply-count { font-variant-numeric: tabular-nums; opacity: .8; }

.t-filters__cancel {
  display: block;
  width: 100%;
  margin-top: var(--t-s2);
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--t-fs-xs);
  text-align: center;
  cursor: pointer;
}

.t-filters__cancel[hidden] { display: none; }

/* Ką tik palietė, bet dar nepritaikyta — signalinė spalva. Kitaip žmogus
   nesupranta, kodėl sąrašas dešinėje nepasikeitė. */
.t-filter__item.is-pending .t-filter__box {
  border-color: var(--t-signal);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-signal) 25%, transparent);
}

.t-filter__item.is-pending.is-active .t-filter__box {
  background: var(--t-signal);
}

.t-filter { border-bottom: 1px solid var(--t-line); }

.t-filter__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--t-s4);
  font-family: var(--t-font-ui);
  font-weight: 600;
  font-size: var(--t-fs-sm);
  cursor: pointer;
  list-style: none;
}

.t-filter__summary::-webkit-details-marker { display: none; }

.t-filter__summary svg {
  color: var(--t-ink-soft);
  transform: rotate(-90deg);
  transition: transform var(--t-base) var(--t-ease);
}
.t-filter[open] .t-filter__summary svg { transform: rotate(0); }

.t-filter__list {
  list-style: none;
  margin: 0 0 var(--t-s4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.t-filter__item {
  display: flex;
  align-items: center;
  gap: var(--t-s3);
  padding: 6px 4px;
  color: var(--t-ink);
  font-size: var(--t-fs-sm);
  border-radius: var(--t-radius);
  transition: background-color var(--t-fast) var(--t-ease);
}

.t-filter__item:hover { background: var(--t-paper); color: var(--t-ink); }

.t-filter__box {
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  background: var(--t-surface);
  position: relative;
  transition: background-color var(--t-fast) var(--t-ease),
              border-color var(--t-fast) var(--t-ease);
}

.t-filter__item.is-active .t-filter__box {
  background: var(--t-ink);
  border-color: var(--t-ink);
}

.t-filter__item.is-active .t-filter__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.t-filter__name { flex: 1; }
.t-filter__count { color: var(--t-ink-soft); font-size: var(--t-fs-xs); }

.t-filter__more {
  background: none;
  border: 0;
  padding: 0 0 var(--t-s4);
  font: inherit;
  font-size: var(--t-fs-xs);
  cursor: pointer;
}

/* --- įrankių juosta ------------------------------------------------------- */

.t-toolbar {
  display: flex;
  align-items: center;
  gap: var(--t-s3);
  margin-bottom: var(--t-s5);
}

.t-toolbar__filters { display: none; }

.t-toolbar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 5px;
  /* 11 px baltas skaičius — reikia tamsinto fono, kad būtų 4,5:1. */
  background: var(--t-signal-dark);
  color: #fff;
  border-radius: var(--t-radius);
  font-size: 11px;
  font-weight: 700;
}

.t-toolbar__sort { margin-inline-start: auto; }

.t-toolbar__sort,
.t-toolbar__sort .woocommerce-ordering { display: flex; }

/* Sava rodyklė: naršyklės numatytoji lipdavo prie pat dešinio krašto.
   Selektorius apima ir `.woocommerce-ordering select`, nes WooCommerce
   savo formai prideda klases, kurių specifiškumas didesnis. */
.t-toolbar__sort select,
.t-toolbar__sort select.orderby,
.woocommerce-ordering select {
  height: var(--t-control-h);
  padding-inline: var(--t-s4) 44px;
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  background-color: var(--t-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B78' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--t-s4) center;
  background-size: 16px 16px;
  color: var(--t-ink);
  font: inherit;
  font-size: var(--t-fs-sm);
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Internet Explorer / senas Edge piešia savo rodyklę atskirai. */
.t-toolbar__sort select::-ms-expand { display: none; }

.t-toolbar__sort select:hover,
.woocommerce-ordering select:hover { border-color: var(--t-ink); }

/* aktyvių filtrų žymos */
.t-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--t-s2);
  margin-bottom: var(--t-s5);
}

.t-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--t-s2);
  padding: 5px var(--t-s3);
  border: 1px solid var(--t-line-strong);
  border-radius: var(--t-radius);
  color: var(--t-ink);
  font-size: var(--t-fs-xs);
  transition: border-color var(--t-fast) var(--t-ease), color var(--t-fast) var(--t-ease);
}

.t-chip:hover { border-color: var(--t-bad); color: var(--t-bad); }
.t-chips__reset { font-size: var(--t-fs-xs); margin-inline-start: var(--t-s2); }

/* Tuščio rezultato blokas persikėlė į `components.css` — jo reikia ir
   bendrai paieškai, kuri šio failo nekrauna. */

/* --- mobile: filtrai kaip stalčius ----------------------------------------- */

@media (max-width: 999px) {
  .t-toolbar__filters { display: inline-flex; }

  .t-filters {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--t-z-drawer);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--t-surface);
    border-top: 1px solid var(--t-line);
    box-shadow: var(--t-shadow-3);
    transform: translateY(101%);
    /* Vien `transform` elemento iš prieinamumo medžio nepašalina: uždarytas
       stalčius lieka fokusuojamas ir klaviatūra Tab'as krenta į nematomus
       filtrus. `visibility: hidden` jį iškerta, o uždelstas perėjimas leidžia
       išsislinkti prieš dingstant. */
    visibility: hidden;
    transition: transform 260ms var(--t-ease-out), visibility 0s linear 260ms;
    padding-inline: var(--t-gutter);
  }

  .t-filters.is-open {
    transform: none;
    visibility: visible;
    transition: transform 260ms var(--t-ease-out), visibility 0s;
  }

  .t-filters__head {
    padding-top: var(--t-s4);
    position: sticky;
    top: 0;
    background: var(--t-surface);
  }

  .t-filters__body { overflow-y: auto; flex: 1; }

  .t-filters__close { display: inline-flex; }

  .t-filters__foot {
    display: block;
    padding-block: var(--t-s4);
    border-top: 1px solid var(--t-line);
    background: var(--t-surface);
  }
}

/* --- lietimo taikiniai ------------------------------------------------------
   Pirštu 28–30 px eilutė nepataikoma: WCAG 2.5.8 ir platformų gairės prašo
   bent 44 px. Didinam tik siauruose ekranuose, kad desktope filtrų sąrašas
   neišsitemptų per visą ekraną. */

@media (max-width: 999px) {
  .t-filter__item {
    min-height: 44px;
    padding-block: var(--t-s2);
  }

  .t-chip {
    min-height: 44px;
    padding-block: var(--t-s2);
  }

  .t-filter__more { min-height: 44px; }
}