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

/* OCFilter = START */
#column-left {
  padding: 28px 15px 33px;
  background: #fefdfe;
  border: 0;
  border-radius: 8px;
  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: 18px;
  line-height: 130%;
  color: #1e1e1e;
  margin-bottom: 16px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d4d4d4;
}

.mobile #column-left .ocf-header {
  margin-bottom: 0;
  padding-bottom: 16px;
}

#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: 16px;
  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;
}

#column-left .ocf-input-group input {
  background-color: transparent;
  border: none;
  text-align: center;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 14px;
  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: #f1f3f8;
  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: 5px;
  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: 5px;
}

#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: 400;
  font-size: 14px;
  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: 5px;
  display: none;
  z-index: 1000;
}

.sort-dropdown__item {
  display: block;
  padding: 10px 12px;
  border-radius: 5px;
  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: 18px;
  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 .sr-only {
  display: none;
}

.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 (min-width: 1040px) {
  .top-action__filter-sort-sort .custom-select-container.customSelect {
    padding-left: 48px;
    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.16667H2C1.72667 5.16667 1.5 4.94001 1.5 4.66667C1.5 4.39334 1.72667 4.16667 2 4.16667H14C14.2733 4.16667 14.5 4.39334 14.5 4.66667C14.5 4.94001 14.2733 5.16667 14 5.16667Z' 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.33366 11.8333H6.66699C6.39366 11.8333 6.16699 11.6067 6.16699 11.3333C6.16699 11.06 6.39366 10.8333 6.66699 10.8333H9.33366C9.60699 10.8333 9.83366 11.06 9.83366 11.3333C9.83366 11.6067 9.60699 11.8333 9.33366 11.8333Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 16px 16px;
  }
}

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

  .top-action__left {
    margin-bottom: 3px;
    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: 5px;
  }

  /* 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: 20px;
  }
}
/* 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: 9px;
  align-items: start;
}

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

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

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

.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;
  height: 52px;
}

#show-more-wrap .load__more,
#show-more-wrap .product__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#show-more-wrap .load__more {
  padding: 2px 2px 2px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #fff;
  border: 0;
  border-radius: 75px;
  cursor: pointer;
  overflow: hidden;
}

#show-more-wrap .load__more span {
  color: #000;
  font-family: var(--main-font);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}

#show-more-wrap .load__more .loadmore-icon {
  display: none;
  margin-left: 0;
}

#show-more-wrap .load__more .loadmore-icon rect,
#show-more-wrap .load__more .loadmore-icon path {
  transition:
    fill 0.3s ease,
    opacity 0.3s ease;
}

#show-more-wrap .load__more .loadmore-icon rect {
  fill: #0dbadc;
}

#show-more-wrap .load__more .loadmore-icon path {
  fill: #fff;
}

#show-more-wrap .load__more:hover .loadmore-icon rect {
  fill: #fff;
}

#show-more-wrap .load__more:hover .loadmore-icon path {
  fill: #0dbadc;
}

#show-more-wrap .product__loader {
  display: none;
  width: max-content;
  text-align: center;
}

#show-more-wrap .product__loader span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0dbadc;
  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-top: 58px;
    margin-bottom: 40px;
  }

  #show-more-wrap .load__more span {
    padding: 0;
    height: auto;
    background-color: transparent;
    border: 0;
    /* text-decoration: underline; */
  }

  #show-more-wrap .load__more:hover span {
    background-color: transparent;
    color: #000;
  }
}
/* Show more button = END */