/* ==========================================================================
   MC-Kuchnie — listing kategorii / wyszukiwarki (makieta 2b, paleta 3d)
   Ładowany na kontrolerach listingu (product-list.tpl, block 'head'),
   PO _tokens.css i _components.css. Karta siatki = komponent z _components.css.
   Zasady: brak !important, prefiks mck-, kolory wyłącznie z tokenów.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Nagłówek kategorii: h1 38px + opis na górze (70ch, czarny tekst)
   -------------------------------------------------------------------------- */
#js-product-list-header .page-title,
#js-product-list-header .page-title span {
  font-family: var(--mck-font-head);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mck-text);
  text-transform: none;
  text-align: left;
}
#js-product-list-header .page-title { margin: 0 0 12px; }
#js-product-list-header .page-title span { background: none; padding: 0; }

.mck-cat-intro { margin: 0 0 32px; }
.mck-cat-intro .rte-content,
.mck-cat-intro .rte-content p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--mck-text);
}
.mck-cat-intro .rte-content { max-width: 70ch; }
.mck-cat-intro .rte-content p { margin: 0 0 10px; }
.mck-cat-intro .rte-content h2,
.mck-cat-intro .rte-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--mck-text);
  margin: 16px 0 8px;
}

/* pas breadcrumbów na neutralnym tle (spójnie z kartą produktu) */
.page-category #wrapper .breadcrumb,
.page-search #wrapper .breadcrumb {
  background: var(--mck-surface);
  border-radius: var(--mck-radius);
}

/* --------------------------------------------------------------------------
   2. Układ dwukolumnowy: filtry 264px + treść (od md w górę)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .page-category #left-column,
  .page-search #left-column,
  .page-manufacturer #left-column,
  .page-prices-drop #left-column,
  .page-new-products #left-column,
  .page-best-sales #left-column {
    flex: 0 0 264px;
    max-width: 264px;
    border-right: 1px solid var(--mck-line-soft);
    padding-right: 32px;
  }
  .page-category #content-wrapper,
  .page-search #content-wrapper,
  .page-manufacturer #content-wrapper,
  .page-prices-drop #content-wrapper,
  .page-new-products #content-wrapper,
  .page-best-sales #content-wrapper {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   3. Filtry (faceted search)
   -------------------------------------------------------------------------- */
#search_filters .facet { margin: 0 0 24px; padding: 0; border: 0; }
#search_filters .facet-title,
#search_filters .facet-title span {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mck-text);
  background: none;
}
#search_filters .facet-title { margin: 0 0 12px; padding: 0 0 8px; border-bottom: 1px solid var(--mck-line-soft); }
#search_filters .facet ul { margin: 0; }
#search_filters .facet li { margin: 0 0 8px; }
#search_filters .facet .facet-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-height: 24px;
}
#search_filters .facet .custom-checkbox { flex: 0 0 16px; }
#search_filters .facet .custom-checkbox input,
#search_filters .facet .custom-radio input { width: 16px; height: 16px; accent-color: var(--mck-ink); }
#search_filters .facet .search-link {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  color: var(--mck-text);
  text-decoration: none;
}
#search_filters .facet .search-link:hover { color: var(--mck-accent); }
#search_filters .facet .facet-label.active .search-link { font-weight: 700; }
#search_filters .facet .magnitude {
  color: var(--mck-off);
  font-size: 13px;
}

/* aktywne filtry nad siatką */
#js-active-search-filters .filter-block {
  background: var(--mck-surface);
  border: 1px solid var(--mck-line);
  border-radius: var(--mck-radius);
  color: var(--mck-text);
}

/* --------------------------------------------------------------------------
   4. Pasek nad siatką: licznik + sortowanie
   -------------------------------------------------------------------------- */
#js-product-list-top {
  border: 1px solid var(--mck-line);
  border-radius: var(--mck-radius);
  background: #fff;
  padding: 10px 16px;
  margin: 0 0 20px;
}
#js-product-list-top .mck-toolbar-count .showing {
  font-size: 14px;
  color: var(--mck-text);
  display: inline-block;
}
#js-product-list-top .mck-toolbar-count__sep { color: var(--mck-muted); padding: 0 6px; }
/* sortowanie: dropdown motywu w ramce jak select */
#js-product-list-top .products-sort-order .select-title,
#js-product-list-top .products-sort-nb-dropdown .select-title {
  border: 1px solid var(--mck-input-line);
  border-radius: var(--mck-radius);
  background: #fff;
  color: var(--mck-text);
  font-size: 14px;
  padding: 9px 12px;
  box-shadow: none;
}
#js-product-list-top .dropdown-menu {
  border: 1px solid var(--mck-line);
  border-radius: var(--mck-radius);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Siatka produktów: 3 kolumny na desktopie (karta z _components.css)
   -------------------------------------------------------------------------- */
#products .products-grid,
.page-category .products-grid,
.page-search .products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
}
#products .products-grid > [class*="col"],
#products .products-grid > .js-product-miniature-wrapper,
.page-category .products-grid > [class*="col"],
.page-search .products-grid > [class*="col"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
  margin: 0;
}

/* plakietki na kaflu zdjęcia: czarne, lewy górny róg */
#products .product-miniature .product-flags {
  position: absolute;
  top: 8px;
  left: 8px;
  right: auto;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   6. Paginacja: wyśrodkowana, aktywna strona na czerni (skin w _components)
   -------------------------------------------------------------------------- */
#products .pagination-wrapper-bottom .row { justify-content: center; }
#products nav.pagination { display: flex; justify-content: center; }
#products .page-list {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 24px 0 8px;
  background: none;
  box-shadow: none;
  padding: 0;
}
#products .page-list a,
#products .page-list span {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   7. Pusty wynik po zawężeniu filtrów
   -------------------------------------------------------------------------- */
#products .mck-empty,
#products #js-product-list .alert,
#products .products-empty {
  background: var(--mck-surface);
  border: 1px solid var(--mck-line);
  border-radius: var(--mck-radius);
  color: var(--mck-text);
  font-size: 16px;
  padding: 32px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. Responsywność
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  #products .products-grid,
  .page-category .products-grid,
  .page-search .products-grid { grid-template-columns: repeat(3, 1fr); }
  #js-product-list-header .page-title,
  #js-product-list-header .page-title span { font-size: 32px; }
}
@media (max-width: 899px) {
  #products .products-grid,
  .page-category .products-grid,
  .page-search .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  #products .products-grid,
  .page-category .products-grid,
  .page-search .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  #js-product-list-header .page-title,
  #js-product-list-header .page-title span { font-size: 26px; }
  .mck-cat-intro .rte-content, .mck-cat-intro .rte-content p { font-size: 15px; }
  #js-product-list-top { padding: 8px 12px; }
  .product-miniature-layout-2 { padding: 12px; }
}