/* Listing pages (search results, categories, discounts, coupons): sidebar with category tree and filters,
   title bar with sort + grid/list toggle, product grid, pager. Cards, grid, pager, select: components.css. */
.page-main--listing { --section-gap: clamp(40px, 6.67vw, 96px); --gap: 16px; } /* phones tighter (user 10-05); 24 from 768 */

.listing { display: grid; gap: 12px; align-items: start; }
.listing__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; } /* grid -> pager 24 */
.listing__aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---- title bar: title (count) ... sort, view toggle. Phones: count below the title, tools right-aligned
   below it, "Rodyti" label from 768 (user decision 09-27) ---- */
.listing-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 24px; margin-bottom: clamp(0px, 1.67vw, 24px); } /* -> grid 48 */
.listing-bar__title { flex: 1 1 100%; font-size: var(--fs-h3); line-height: 1.3125; letter-spacing: 1px; }
.listing-bar__count { display: block; font-size: var(--fs-lg); font-weight: 400; line-height: 24px; letter-spacing: 0; }
.listing-bar__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; }
.listing-bar__sort { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; line-height: 20px; }
.listing-bar__sort .select { font-weight: 400; color: var(--c-text-muted); }
.view-toggle { display: none; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; line-height: 20px; }
.view-toggle__label { display: none; } /* the grid / list switch from 768: the list view has no phone layout */
.view-toggle__box { display: flex; gap: 6px; padding: 6px 12px; border-radius: var(--radius-xs); background: var(--c-surface); box-shadow: var(--shadow-raised); }
.view-toggle button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #52525b; }
.view-toggle button[aria-pressed="true"] { background: var(--c-surface-muted); color: var(--c-text); }

/* ---- sidebar: one white panel with sections (Kategorijos tree, Filtrai, DUK Kategorijos) ---- */
.side-panel { display: flex; flex-direction: column; gap: 16px; padding: 16px; } /* phones; 24 from 768 */
.side-panel:has(> .side-panel__toggle[aria-expanded="false"]) { padding: 8px; } /* closed "Filtrai" panel on phones */
.side-panel__section { display: flex; flex-direction: column; gap: 24px; }
.side-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.side-panel__title { font-size: var(--fs-h3); line-height: 1.3125; letter-spacing: 1px; }
.side-panel__link { padding: 8px; border-bottom: 2px solid var(--c-green); color: var(--c-green); font-size: var(--fs-sm); line-height: 16px; }
.side-panel__more { align-self: flex-start; color: var(--c-green); font-size: var(--fs-sm); line-height: 16px; }

/* below 1024 a panel collapses behind its toggle (the old layout stacked ~1000px of filters above the products) */
.side-panel__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--c-surface-muted);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 20px;
}
.side-panel__toggle .icon { transition: rotate var(--ease); }
.side-panel__toggle[aria-expanded="true"] .icon { rotate: 180deg; }
.side-panel__body { display: flex; flex-direction: column; gap: 24px; }
@media not (min-width: 1024px) {
  .side-panel__toggle[aria-expanded="false"] ~ .side-panel__body { display: none; }
}

/* filter group: heading with chevron (a <details>), checkbox list */
.filter-group { display: block; } /* spacing via margin: flex on <details> is not reliable across browsers */
.filter-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 30px;
  list-style: none;
  cursor: pointer;
}
.filter-group__head::-webkit-details-marker { display: none; }
.filter-group__head .icon { transition: rotate var(--ease); }
.filter-group:not([open]) .filter-group__head .icon { rotate: -90deg; }
.filter-group[open] > :not(summary) { margin-top: 16px; }
.check-list { display: flex; flex-direction: column; gap: 4px; }
.check-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check-list .checkbox { color: var(--c-text); line-height: 24px; }
.check-list__remove { display: grid; place-items: center; color: var(--c-green); }
/* long lists show 8 items until "Rodyti daugiau" is pressed */
.check-list--more:not(:has(+ .side-panel__more[aria-expanded="true"])) > li:nth-child(n + 9) { display: none; }
.side-panel__more[aria-expanded="true"] { display: none; }
.check-list__thumb { display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; border-radius: 6px; background: var(--c-surface-muted); object-fit: contain; }
.check-list .checkbox:has(.check-list__thumb) { gap: 8px; }
.swatch-box { width: 32px; height: 32px; border: 1px solid var(--c-divider); border-radius: 6px; }
.swatch-box--juoda { background: #000; }
.swatch-box--pilka { background: #737373; }
.swatch-box--baltas { background: #fff; }

/* category tree: checkbox per top level, nested links behind a circle-plus toggle */
.tree { display: flex; flex-direction: column; gap: 8px; }
.tree__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.tree__item .checkbox { color: var(--c-text); line-height: 24px; }
.tree__item .checkbox:has(:checked) { color: var(--c-green); }
.tree__toggle { display: grid; place-items: center; width: 24px; height: 24px; color: var(--c-text); }
.tree__item > .checkbox:has(:checked) ~ .tree__toggle { color: var(--c-green); }
.tree__children { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-left: 24px; }
.tree__toggle[aria-expanded="false"] + .tree__children { display: none; }
.tree__children li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.tree__children .tree__children { flex-basis: 100%; padding-left: 16px; } /* deeper levels */
.tree__toggle[aria-expanded="true"] { --plus-stroke: 0; } /* an open row shows a circle-minus (the sprite's circle-plus drops its vertical stroke) */
.tree__children a { color: var(--c-text-muted); line-height: 24px; }
.tree__children a:hover { color: var(--c-green); }
.tree__children .tree__toggle { color: var(--c-text); }

/* price range: two native range inputs over one track; site.js keeps --from / --to and the values in sync */
.range { --from: 0%; --to: 100%; display: flex; flex-direction: column; gap: 8px; }
.range__values { display: flex; justify-content: space-between; }
.range__values output { padding: 4px 8px; border-radius: var(--radius-xs); background: var(--c-surface-muted); font-size: var(--fs-md); font-weight: 600; line-height: 20px; }
.range__control { position: relative; height: 20px; }
.range__control::before, .range__control::after { content: ""; position: absolute; top: 8px; height: 4px; border-radius: var(--radius-xs); }
.range__control::before { left: 0; right: 0; background: var(--c-divider); }
.range__control::after { left: var(--from); right: calc(100% - var(--to)); background: var(--c-green); }
.range input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  margin: 0;
  background: none;
  appearance: none;
  pointer-events: none;
}
.range input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid var(--c-green);
  border-radius: 50%;
  background: var(--c-page);
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
  appearance: none;
  pointer-events: auto;
  cursor: grab;
}
/* nothing to range over (every product the same price): ctheme2.js disables both inputs and adds .is-flat */
.range.is-flat { opacity: 0.45; cursor: not-allowed; }
.range.is-flat input::-webkit-slider-thumb { cursor: not-allowed; }
.range.is-flat input::-moz-range-thumb { cursor: not-allowed; }
.range input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--c-green);
  border-radius: 50%;
  background: var(--c-page);
  pointer-events: auto;
  cursor: grab;
}

@media (min-width: 480px) {
  .listing-bar__count { display: inline; }
}
@media (min-width: 768px) {
  .page-main--listing { --gap: 24px; }
  .listing, .listing__aside { gap: 24px; }
  .listing-bar { gap: 16px 48px; }
  .side-panel, .side-panel:has(> .side-panel__toggle[aria-expanded="false"]) { padding: 24px; }
  .view-toggle { display: flex; }
  .view-toggle__label { display: inline; }
  .listing-bar { justify-content: space-between; }
  .listing-bar__title { flex-basis: auto; }
}
@media (min-width: 1024px) {
  .listing { grid-template-columns: 318px minmax(0, 1fr); }
  .side-panel__toggle { display: none; }
}