/* _category.css — Starterpack (child theme) — listing kategorii.
 * Od scalenia bundli (theme.yml, priority 120) ladowany GLOBALNIE —
 * reguly zawezac przez #category (body id listingu). */

/* Odstep miedzy szarym blokiem naglowka (h1 + breadcrumby) a trescia
   listingu = 30px (decyzja 2026-08-14). Margin, nie padding — ma byc
   bialy, poza tlem bloku. Globalnie margin wrappera jest wyzerowany
   w custom/_header.css (.wh-pageheader + .breadcrumb__wrapper). */
#category .wh-pageheader + .breadcrumb__wrapper {
  margin-bottom: var(--wh-space-30, 3rem);
}

#left-column .left-block {
  border-bottom: 0;
  padding-bottom: 0;
  margin-block-end: var(--wh-space-lg, 3.2rem);
}
#left-column .left-block__title {
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  margin: 0 0 var(--wh-space-md, 1.6rem);
}
#left-column .left-block__title-link { color: var(--wh-color-text-primary, #40362e); }
#left-column .left-block__title-link:hover,
#left-column .left-block__title-link:focus-visible { color: var(--wh-color-accent, #9e8264); }

.accordion--category .accordion-button {
  background: transparent;
  box-shadow: none;
  border: 0;
  width: auto;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
}
.accordion--category .accordion-button::after,
.search-filters .accordion-button::after {
  content: "";
  border: 0;
  width: 1rem;
  height: 0.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2340362E' d='M1.8189e-07 0.999459L1.00158 4.37806e-08L4.75079 3.74638L8.5 3.71547e-07L9.50158 1.00229L5.75237 4.74583C5.48671 5.01142 5.12644 5.16062 4.75079 5.16062C4.37514 5.16062 4.01487 5.01142 3.74921 4.74583L1.8189e-07 0.999459Z'/%3E%3C/svg%3E") no-repeat center / 1rem 0.6rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.accordion--category .accordion-button:not(.collapsed)::after,
.search-filters .accordion-button:not(.collapsed)::after { transform: rotate(180deg); }
.accordion--category .accordion-body { padding: 0.6rem 0 0.2rem; }

.category-tree__list { row-gap: 0.2rem; }
.category-tree__list[data-depth="0"] { row-gap: 0.6rem; }
.category-tree__list[data-depth="1"],
.category-tree__list[data-depth="2"],
.category-tree__list[data-depth="3"],
.category-tree__list[data-depth="4"] { padding-inline-start: 1.2rem; }
.category-tree__item-header { padding: 0.2rem 0; }
.category-tree__item-link {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-primary, #40362e);
  line-height: 1.5;
}
.category-tree__list[data-depth="0"] > .category-tree__item > .category-tree__item-header .category-tree__item-link {
  font-weight: var(--wh-font-weight-semibold, 600);
}
.category-tree__list [data-depth] .category-tree__item-link {
  font-weight: var(--wh-font-weight-regular, 400);
  color: var(--wh-color-text-muted, #908981);
}
.category-tree__item-link:hover,
.category-tree__item-link:focus-visible { color: var(--wh-color-accent, #9e8264); }
.category-tree__item-link.st-current,
.category-tree__list [data-depth] .category-tree__item-link.st-current {
  color: var(--wh-color-accent, #9e8264);
  font-weight: var(--wh-font-weight-semibold, 600);
}

.search-filters .accordion { --bs-accordion-border-width: 0; }
.search-filters .accordion-item {
  border: 0;
  background: transparent;
  margin-block-end: var(--wh-space-mid, 2rem);
}
.search-filters .accordion-button {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0 0 1rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.search-filters .accordion-button:hover,
.search-filters .accordion-button:focus-visible { color: var(--wh-color-accent, #9e8264); }
.search-filters .accordion-body {
  padding: 0;
  margin: 0;
  list-style: none;
}
.search-filters ul.accordion-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.search-filters ul.accordion-body:has(.search-filters__form-check--color) {
  flex-direction: column;
  gap: 1rem;
}

.search-filters__form-check:not(.search-filters__form-check--color) .form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.search-filters__form-check:not(.search-filters__form-check--color) .form-check-label {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-sm, 0.4rem);
  background: var(--wh-color-bg-base, #fff);
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-primary, #40362e);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.search-filters__form-check:not(.search-filters__form-check--color) .form-check-label:hover {
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-accent, #9e8264);
}
.search-filters__form-check:not(.search-filters__form-check--color) .form-check-input:checked + .form-check-label {
  background: var(--wh-color-accent, #9e8264);
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-text-inverse, #fff);
}
.search-filters__form-check:not(.search-filters__form-check--color) .form-check-input:focus-visible + .form-check-label {
  outline: 2px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}
.search-filters__link { color: inherit; }
.search-filters__link:hover,
.search-filters__link:focus-visible { color: inherit; text-decoration: none; }
.search-filters__magnitude {
  color: inherit;
  opacity: 0.65;
  font-size: 0.9em;
  margin-inline-start: 0.3rem;
}

.search-filters__form-check--color .form-check-label { gap: 0.8rem; }
.search-filters__form-check--color .form-check-label .color {
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-sm, 0.4rem);
  width: 1.6rem;
  height: 1.6rem;
}
.search-filters__color-label {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}
.search-filters__form-check--color .form-check-label:hover .search-filters__color-label,
.search-filters__form-check--color .form-check-label:hover .search-filters__color-label:hover {
  color: var(--wh-color-accent, #9e8264);
}
.search-filters__form-check--color .form-check-input:checked + .form-check-label .color {
  outline: 2px solid var(--wh-color-accent, #9e8264);
  outline-offset: 2px;
}
.search-filters__form-check--color .form-check-input:checked + .form-check-label .search-filters__color-label {
  color: var(--wh-color-text-primary, #40362e);
  font-weight: var(--wh-font-weight-semibold, 600);
}

.search-filters .noUi-horizontal { height: 3px; margin: 1.2rem 0.8rem 0.6rem; }
.search-filters .noUi-connects {
  background: var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-pill, 99.9rem);
}
.search-filters .noUi-connect { background: var(--wh-color-accent, #9e8264); }
.search-filters .noUi-horizontal .noUi-handle {
  width: 16px;
  height: 16px;
  top: -7px;
  right: -8px;
  background: var(--wh-color-accent, #9e8264);
  border: 2px solid var(--wh-color-accent, #9e8264);
  box-shadow: none;
}
.search-filters .noUi-handle:hover,
.search-filters .noUi-active,
.search-filters .noUi-active:hover { background: var(--wh-color-primary, #40362e); border-color: var(--wh-color-primary, #40362e); }
.search-filters .noUi-handle:focus-visible { outline: 2px solid var(--wh-color-accent, #9e8264); outline-offset: 2px; }
.search-filters__slider-container { margin-block-end: 0; }
.search-filters__slider-values {
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-muted, #908981);
  margin-top: 0.6rem;
}

.search-filters__clear,
.search-filters__clear.btn {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-muted, #908981);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
.search-filters__clear:hover,
.search-filters__clear.btn:hover { color: var(--wh-color-accent, #9e8264); background: transparent; }

.category__header { margin-block-end: var(--wh-space-lg, 3.2rem); }
#js-product-list-header .page-title-section,
.category__header .page-title-section {
  font-size: var(--wh-font-size-h2, 3.2rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  margin-bottom: 1.2rem;
}
.category__description.rich-text {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
  line-height: 1.7;
  max-width: 82rem;
}
.category__description.rich-text p:last-child { margin-bottom: 0; }
.category__cover {
  margin-block-start: var(--wh-space-mid, 2rem);
  border-radius: var(--wh-radius-lg, 1.2rem);
  overflow: hidden;
}
.category__cover-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 576px) {
  .category__header .subcategory { display: none; }
}


.subcategory__list { padding-inline: 0; }
.subcategory__link {
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-pill, 99.9rem);
  padding: 0.6rem 1.4rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-primary, #40362e);
}
.subcategory__link:hover,
.subcategory__link:focus-visible {
  background: transparent;
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-accent, #9e8264);
}

.products__selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 1.6rem;
  margin-block-end: var(--wh-space-mid, 2rem);
}
.products__count,
.products__count span {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}
.products__sort { order: 0; gap: 0.8rem; }
.products__sort-label {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}
.products__sort-dropdown { flex-grow: 0; position: relative; }
.products__sort-dropdown-button,
.products__sort-dropdown-button.btn-outline-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  min-width: 21rem;
  background: var(--wh-color-bg-base, #fff);
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  padding: 1rem 1.4rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-primary, #40362e);
  box-shadow: none;
}
.products__sort-dropdown-button:hover,
.products__sort-dropdown-button:focus,
.products__sort-dropdown-button:focus-visible,
.products__sort-dropdown-button[aria-expanded="true"] {
  background: var(--wh-color-bg-base, #fff);
  border-color: var(--wh-color-accent, #9e8264);
  color: var(--wh-color-text-primary, #40362e);
  box-shadow: none;
}
.products__sort-dropdown-button::after {
  content: "";
  border: 0;
  width: 1rem;
  height: 0.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2340362E' d='M1.8189e-07 0.999459L1.00158 4.37806e-08L4.75079 3.74638L8.5 3.71547e-07L9.50158 1.00229L5.75237 4.74583C5.48671 5.01142 5.12644 5.16062 4.75079 5.16062C4.37514 5.16062 4.01487 5.01142 3.74921 4.74583L1.8189e-07 0.999459Z'/%3E%3C/svg%3E") no-repeat center / 1rem 0.6rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.products__sort-dropdown-button[aria-expanded="true"]::after { transform: rotate(180deg); }
.products__sort .dropdown-menu {
  min-width: 100%;
  border: 1px solid var(--wh-color-border-subtle, #e4e0da);
  border-radius: var(--wh-radius-md, 0.8rem);
  box-shadow: var(--wh-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
  padding: 0.6rem;
  margin-top: 0.4rem;
}
.products__sort .dropdown-item {
  border-radius: var(--wh-radius-sm, 0.4rem);
  padding: 0.8rem 1rem;
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-primary, #40362e);
}
.products__sort .dropdown-item:hover,
.products__sort .dropdown-item:focus-visible {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  color: var(--wh-color-accent, #9e8264);
}
.products__sort .dropdown-item.current {
  background: transparent;
  color: var(--wh-color-accent, #9e8264);
  font-weight: var(--wh-font-weight-semibold, 600);
}

.pagination {
  --bs-pagination-focus-box-shadow: none;
  gap: 0.4rem;
  align-items: center;
  font-size: var(--wh-font-size-body, 1.4rem);
}
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.6rem;
  height: 3.6rem;
  padding: 0 1rem;
  border: 0;
  background: transparent;
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
  border-radius: var(--wh-radius-md, 0.8rem);
  box-shadow: none;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.pagination .page-link:hover:not(:disabled),
.pagination .page-link:focus-visible:not(:disabled) {
  background: transparent;
  color: var(--wh-color-accent, #9e8264);
}
.pagination .page-item.active .page-link {
  background: var(--wh-color-bg-subtle, #f7f7f7);
  color: var(--wh-color-text-primary, #40362e);
  font-weight: var(--wh-font-weight-medium, 500);
}
@layer bs-base {
  .pagination .page-link.previous span,
  .pagination .page-link.next span { display: none !important; }
}
.pagination .page-link .material-icons { font-size: 2rem; }
.pagination .page-link.disabled,
.pagination .page-link:disabled {
  color: var(--wh-color-border-strong, #9ca3af);
  opacity: 0.5;
  background: transparent;
}
.pagination__number {
  font-size: var(--wh-font-size-body, 1.4rem);
  color: var(--wh-color-text-muted, #908981);
}

.active-filters { margin-block-end: var(--wh-space-mid, 2rem); }
.active-filters__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.active-filters__title {
  font-size: var(--wh-font-size-body, 1.4rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  margin-inline-end: 0.4rem;
}
.active-filters .active-filters__link.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--wh-font-size-small, 1.2rem);
  color: var(--wh-color-text-primary, #40362e);
  background: var(--wh-color-bg-base, #fff);
  border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
  padding: 0.5rem 0.8rem 0.5rem 1.2rem;
  box-shadow: none;
}
.active-filters .active-filters__link.btn:hover,
.active-filters .active-filters__link.btn:focus-visible {
  color: var(--wh-color-accent, #9e8264);
  border-color: var(--wh-color-accent, #9e8264);
  background: var(--wh-color-bg-base, #fff);
}
.active-filters .active-filters__link .material-icons { font-size: 1.6rem; }

#category #wrapper,
#search #wrapper,
#new-products #wrapper,
#best-sales #wrapper,
#prices-drop #wrapper { padding-block-end: var(--wh-space-xl, 6.4rem); }

#search #js-product-list-header,
#new-products #js-product-list-header,
#best-sales #js-product-list-header,
#prices-drop #js-product-list-header { margin-block-end: var(--wh-space-mid, 2.4rem); }

@media (min-width: 992px) {
  #category #left-column {
    position: sticky;
    top: 18rem;
    align-self: flex-start;
    transition: top 0.32s ease;
  }
  #category:has(#header.wh-header--compact) #left-column { top: 8rem; }
}

.st-cattree-toggle { display: none; }

@media (max-width: 991.98px) {
  #left-column .left-block { margin-block-end: var(--wh-space-mid, 2rem); }

  .st-cattree-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    background: var(--wh-color-bg-base, #fff);
    border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
    border-radius: var(--wh-radius-md, 0.8rem);
    padding: 1.1rem 1.4rem;
    font-size: var(--wh-font-size-body, 1.4rem);
    font-weight: var(--wh-font-weight-semibold, 600);
    color: var(--wh-color-text-primary, #40362e);
    cursor: pointer;
  }
  .st-cattree-toggle:hover,
  .st-cattree-toggle:focus-visible {
    border-color: var(--wh-color-accent, #9e8264);
    color: var(--wh-color-accent, #9e8264);
  }
  .st-cattree-toggle::after {
    content: "";
    width: 1rem;
    height: 0.6rem;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2340362E' d='M1.8189e-07 0.999459L1.00158 4.37806e-08L4.75079 3.74638L8.5 3.71547e-07L9.50158 1.00229L5.75237 4.74583C5.48671 5.01142 5.12644 5.16062 4.75079 5.16062C4.37514 5.16062 4.01487 5.01142 3.74921 4.74583L1.8189e-07 0.999459Z'/%3E%3C/svg%3E") no-repeat center / 1rem 0.6rem;
    transition: transform 0.2s ease;
  }
  .ps-categorytree.st-open .st-cattree-toggle::after { transform: rotate(180deg); }

  #left-column .ps-categorytree .left-block__title { display: none; }
  #left-column .ps-categorytree .accordion--category { display: none; }
  #left-column .ps-categorytree.st-open .accordion--category {
    display: block;
    padding: 1.4rem 0.2rem 0.2rem;
  }

  .products__selection { gap: 1rem 1.2rem; }
  .products__sort { width: 100%; flex-wrap: nowrap; }
  .products__sort-label { display: none; }
  .products__sort-dropdown { flex: 1 1 auto; min-width: 0; }
  .products__sort-dropdown-button,
  .products__sort-dropdown-button.btn-outline-tertiary { width: 100%; min-width: 0; }

  .products__filter-button.btn,
  .products__filter-button.btn-outline-primary {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--wh-color-bg-base, #fff);
    border: 1.5px solid var(--wh-color-border-subtle, #e4e0da);
    border-radius: var(--wh-radius-md, 0.8rem);
    padding: 1rem 1.4rem;
    font-size: var(--wh-font-size-body, 1.4rem);
    color: var(--wh-color-text-primary, #40362e);
    box-shadow: none;
  }
  .products__filter-button.btn:hover,
  .products__filter-button.btn:focus-visible {
    border-color: var(--wh-color-accent, #9e8264);
    color: var(--wh-color-accent, #9e8264);
    background: var(--wh-color-bg-base, #fff);
  }
  .products__filter-button .material-icons {
    font-size: 1.8rem;
    color: var(--wh-color-accent, #9e8264);
  }

  .active-filters__list { gap: 0.6rem; }
  .pagination__container { justify-content: space-between; column-gap: 1rem; }
}

.ps-facetedsearch--mobile.offcanvas { width: min(88vw, 34rem); }
.ps-facetedsearch--mobile .offcanvas-header {
  border-bottom: 1px solid var(--wh-color-border-subtle, #e4e0da);
  padding: 1.6rem 2rem;
}
.ps-facetedsearch--mobile .offcanvas-title {
  font-size: var(--wh-font-size-base, 1.6rem);
  font-weight: var(--wh-font-weight-semibold, 600);
  color: var(--wh-color-text-primary, #40362e);
  margin: 0;
}
.ps-facetedsearch--mobile .offcanvas-body { padding: 2rem; }
.ps-facetedsearch--mobile .left-block__title { display: none; }
.ps-facetedsearch--mobile .left-block { margin-block-end: 0; }