/* listing.css — спільні стилі для сторінок-списків товарів
   (категорія, пошук, розпродаж, виробник, 404 "можливо вам сподобається"):
   фільтр OCFilter, сортування, шапка "Filter+Sort", грід-рядок content+sidebar,
   кнопка "показати ще". Перенесено з main.css, щоб не вантажити ці стилі на
   сторінках, де списків товарів немає (головна, товар, кошик/checkout,
   акаунт, блог тощо). */

/* OCFilter = START */
#column-left {
  padding: 10px 18px 30px 0;
  background: transparent;
  border: 0;
  border-radius: 5px;
  width: 100%;
  flex-shrink: 0;
}

#column-left .ocf-content {
  margin: 0;
}

#column-left .ocf-header {
  font-family: var(--main-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 130%;
  color: #141414;
  margin-bottom: 25px;
}

#column-left .ocf-filter-body {
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  border-bottom: 1px solid #d4d4d4;
  padding-bottom: 15px;
}

.mobile #column-left .ocf-filter-body {
  border-bottom: none;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #d4d4d4;
}

#column-left .ocf-filter-body .ocf-filter-header {
  cursor: pointer;
  transition: margin-bottom 0.3s;
}

#column-left .ocf-filter-body .ocf-filter-header .ocf-filter-name {
  display: flex;
  align-items: center;
  font-family: var(--main-font);
  font-weight: 600;
  font-size: 20px;
  line-height: 125%;
  color: #1e1e1e;
  text-transform: capitalize;
}

.mobile #column-left .ocf-filter-body .ocf-filter-header .ocf-filter-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #141414;
  text-transform: capitalize;
}

.mobile #column-left .ocf-filter-body .ocf-filter-header .ocf-filter-name svg {
  display: none;
}

#column-left .ocf-filter-body .ocf-filter-header .ocf-filter-name svg {
  transition: 0.2s ease-in-out;
  margin-left: 10px;
  flex-shrink: 0;
}

#column-left .ocf-filter-body .ocf-filter-header .ocf-filter-name svg path {
  stroke: #141414;
}

#column-left .ocf-filter-body .ocf-filter-header.collapsed .ocf-filter-name svg {
  transform: rotate(180deg);
}

#column-left .ocf-slider .ocf-filter-body .ocf-filter-header .ocf-filter-name {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #141414;
  text-transform: capitalize;
}

#column-left .ocf-filter-body .ocf-filter-header.collapsed {
  margin-bottom: 0;
  background-color: #fff;
}

#column-left .ocf-input-group input {
  background-color: transparent;
  border: none;
  text-align: center;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  color: #141414;
}

#column-left .ocf-input-group .ocf-input-group-addon {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  color: #141414;
  background-color: transparent;
}

#column-left .slider_input_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.mobile #column-left .slider_input_wrap {
  margin-bottom: 10px;
}

#column-left .slider_input_wrap .ocf-slider-input-group {
  margin-bottom: 0;
  height: 50px;
  background-color: #f4f4f4;
  border-radius: 0;
  display: flex;
  align-items: center;
}

#column-left .slider_input_wrap .filter-ok {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 0;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  color: #fff;
}

#column-left .ocf-input-group .ocf-input-group-addon.prefix {
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  color: #141414;
}

#column-left .ocf-value-slider {
  margin-bottom: 10px;
  max-width: 100%;
  margin-inline: 4px;
}

#column-left .ocf-value-slider .ocf-noUi-handle {
  background-color: #000;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

#column-left .ocf-value-slider .ocf-noUi-connect:before {
  background-color: #000;
}

#column-left .ocf-noUi-pips {
  display: none;
}

#column-left .ocf-popover {
  display: none !important;
}

#column-left .ocf-value-input::before {
  background-color: transparent;
  border: 1px solid #1e1e1e;
  border-radius: 2px;
}

#column-left .ocf-selected .ocf-value-input::before {
  background-color: #000;
  border: 1px solid #000;
}

#column-left .ocf-value-name {
  font-family: var(--main-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 156%;
  color: #232323;
}

.mobile #column-left .ocf-filter-list {
  padding-bottom: 55px;
}

.mobile #column-left .ocf-value-list {
  height: 100% !important;
}

.mobile #column-left .ocf-value-list .ocf-collapse-value {
  height: max-content;
}

#column-left .ocf-footer {
  box-shadow: none;
  background-color: transparent;
  position: relative;
  margin: 0;
}

.mobile #column-left .ocf-footer {
  position: absolute;
  padding: 10px 0;
  background-color: #fff;
}

#column-left .ocf-footer::after {
  display: none;
}

#column-left .ocf-footer .ocf-between {
  justify-content: center;
}

.mobile #column-left .ocf-footer .ocf-between {
  padding: 0 20px;
  flex-direction: column;
  gap: 10px;
}

#column-left .ocf-footer .ocf-between .ocf-btn-link {
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 114%;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: #4e4e4e;
  text-transform: lowercase;
}

.ocf-body .ocf-btn-show-filters {
  margin-inline: auto;
  padding-left: 12px;
  background: #000;
  width: auto;
  height: 40px;
  border-radius: 5px;
}

.mobile .ocf-body .ocf-btn-show-filters {
  margin: 20px auto 0;
}

.ocf-body .ocf-btn-show-filters span {
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 12px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
}

.ocf-body .ocf-btn-show-filters .ocf-angle {
  display: none;
}

#column-left .ocf-footer .ocf-between .ocf-btn-block {
  height: 40px;
  background: #000;
  width: max-content;
  border-radius: 5px;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 130%;
  color: #fff;
  display: none;
}

.mobile #column-left .ocf-footer .ocf-between .ocf-btn-block {
  display: block;
}

#column-left .ocf-footer .ocf-between .ocf-btn-block.ocf-disabled {
  opacity: 1;
}

#column-left .ocf-theme-light .ocf-filter + .ocf-filter {
  border-top: 0;
}

@media (max-width: 991.98px) {
  #column-left .ocf-footer .ocf-between .ocf-btn-block {
    width: 100%;
  }

  .ocf-body .ocf-btn-show-filters {
    width: auto;
  }

  .ocf-filter-header .ocf-active-label {
    flex-basis: auto;
    flex-grow: 0;
    margin-top: 0;
    margin-left: 8px;
  }
}
/* OCFilter = END */

/* Dropdown sort = START */
.form-group-sort {
  display: flex;
  align-items: center;
}

.form-group-sort label {
  margin-right: 26px;
  margin-bottom: 0;
  color: #141414;
  font-family: var(--main-font);
  font-weight: 700;
  line-height: 1.3;
}

select#input-sort {
  margin: 0;
  padding: 14px 23px;
  height: auto;
  border: none;
  box-shadow: none;
  user-select: none;
  cursor: pointer;
}

select#input-sort:hover,
select#input-sort:focus {
  margin: 0;
  padding: 14px 23px;
  height: auto;
  border: none;
  box-shadow: none;
}

.sort-icon {
  display: none;
}

.sort-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  display: none;
  z-index: 1000;
}

.sort-dropdown__item {
  display: block;
  padding: 10px 12px;
  border-radius: 0;
  text-decoration: none;
  color: #111;
  font-size: 14px;
}

.sort-dropdown__item:hover {
  background: #f2f2f2;
}

.sort-dropdown__item.is-active {
  background: #111;
  color: #fff;
}

#content a.sort-dropdown__item {
  text-decoration: none;
}

/* wrapper for absolute dropdown */
.js-sort {
  position: relative;
}
/* Dropdown sort = END */

/* Top Action (Filter+Sort) = START */
/* Universal header block for listing pages (category, search, special, manufacturer, ...):
   title/description on the left, filter+sort controls pinned to the right. */
.top-action {
  min-height: 48px;
  margin-top: 0;
  margin-bottom: 23px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  row-gap: 15px;
}

.top-action__left {
  padding-right: 20px;
}

.top-action__title {
  margin-top: 0;
  margin-bottom: 0;
  color: #1e1e1e;
  font-family: var(--main-font);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
}

.top-action__description {
  margin-top: 10px;
  color: #141414;
  font-family: var(--main-font);
  font-size: 14px;
  line-height: normal;
}

.top-action__filter-sort {
  margin-left: auto;
}

.top-action__filter-sort-buttons {
  margin-left: 10px;
  padding-left: 18px;
  justify-content: normal;
  border-left: 1px solid transparent;
}

.top-action__filter-sort-sort {
  position: relative;
  display: flex;
  align-items: center;
}

.top-action__filter-sort-sort .ocf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  background-color: transparent;
  font-family: var(--main-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 130%;
  color: #000;
}

.top-action__text-sort {
  display: none;
  margin-right: 17px;
  color: #141414;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.3;
}

.top-action__filter-sort-sort svg {
  margin-right: 19px;
  flex-shrink: 0;
}

@media (min-width: 992px) {
  .top-action__filter-sort-sort .ocf-btn {
    display: none;
  }
}

@media (max-width: 1039.98px) {
  .top-action {
    margin-bottom: 23px;
    padding-bottom: 15px;
    display: block;
    border-bottom: 1px solid #000;
  }

  .top-action__left {
    margin-bottom: 12px;
    width: 100%;
    padding-right: 0;
  }

  .top-action__filter-sort {
    width: 100%;
    margin-left: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .top-action__filter-sort-buttons {
    border-color: #000;
  }

  .top-action__text-sort {
    display: none;
  }

  /* Collapse the custom sort <select> to an icon-only opener on mobile/tablet */
  .top-action__filter-sort-sort .custom-select-container {
    max-width: none;
    width: 20px;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
  }

  /* Anchor the (invisible) native select to the right so the browser's
     minimum select width bleeds left into existing content instead of past
     the viewport edge, which is what caused the page to scroll sideways. */
  .top-action__filter-sort-sort .custom-select-container select {
    left: auto;
    right: 0;
  }

  .top-action__filter-sort-sort .custom-select-opener {
    width: 20px;
    height: 20px;
    padding: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 5.16663H2C1.72667 5.16663 1.5 4.93996 1.5 4.66663C1.5 4.39329 1.72667 4.16663 2 4.16663H14C14.2733 4.16663 14.5 4.39329 14.5 4.66663C14.5 4.93996 14.2733 5.16663 14 5.16663Z' fill='black'/%3E%3Cpath d='M12 8.5H4C3.72667 8.5 3.5 8.27333 3.5 8C3.5 7.72667 3.72667 7.5 4 7.5H12C12.2733 7.5 12.5 7.72667 12.5 8C12.5 8.27333 12.2733 8.5 12 8.5Z' fill='black'/%3E%3Cpath d='M9.33329 11.8334H6.66663C6.39329 11.8334 6.16663 11.6067 6.16663 11.3334C6.16663 11.06 6.39329 10.8334 6.66663 10.8334H9.33329C9.60663 10.8334 9.83329 11.06 9.83329 11.3334C9.83329 11.6067 9.60663 11.8334 9.33329 11.8334Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
  }

  .top-action__filter-sort-sort .custom-select-opener span {
    visibility: hidden;
  }

  .top-action__filter-sort-sort .custom-select-opener::after {
    display: none;
  }

  .top-action__filter-sort-sort .custom-select-panel {
    left: auto;
    right: 0;
    width: 220px;
  }
}

@media (max-width: 767.98px) {
  .top-action__title {
    font-size: 28px;
  }
}
/* Top Action (Filter+Sort) = END */

/* Page Row (content + optional filter sidebar(s)) = START */
/* Universal grid wrapper for listing pages (category, search, special, ...):
   content column shrinks first, sidebar columns are added only when present. */
.page-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 85px;
  align-items: start;
}

.page-row--has-left {
  grid-template-columns: 283px minmax(0, 1fr);
}

.page-row--has-right {
  grid-template-columns: minmax(0, 1fr) 283px;
}

.page-row--has-left.page-row--has-right {
  grid-template-columns: 283px minmax(0, 1fr) 283px;
}

.page-row > #content {
  min-width: 0;
}

@media (max-width: 1039.98px) {
  .page-row,
  .page-row--has-left,
  .page-row--has-right,
  .page-row--has-left.page-row--has-right {
    display: block;
  }
}
/* Page Row (content + optional filter sidebar(s)) = END */

/* Show more button = START */
#show-more-wrap {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}

#show-more-wrap .load__more {
  padding: 14px 40px;
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

#show-more-wrap .load__more:hover {
  background-color: #fff;
  color: #000;
}

#show-more-wrap .product__loader {
  display: none;
}

#show-more-wrap .product__loader span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #000;
  margin: 0 2px;
  opacity: 0.4;
  animation: loader-bounce 0.8s infinite ease-in-out;
}

#show-more-wrap .product__loader span:nth-child(1) {
  animation-delay: 0s;
}

#show-more-wrap .product__loader span:nth-child(2) {
  animation-delay: 0.15s;
}

#show-more-wrap .product__loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes loader-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  #show-more-wrap {
    margin-bottom: 40px;
  }
}
/* Show more button = END */