/* Listy produktów, nawigacja kategorii i filtry katalogu. */

.demo-categories {
  display: grid;
  margin-right: -1rem;
  padding-right: 1rem;
  gap: 0.85rem;
  grid-auto-columns: min(78vw, 20rem);
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.demo-categories::-webkit-scrollbar { display: none; }

.demo-category {
  position: relative;
  min-height: 15rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-brand);
  color: var(--color-on-dark);
  scroll-snap-align: start;
  text-decoration: none;
}

.demo-category::after { position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(15 22 16 / 90%)); content: ""; }
.demo-category img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.demo-category:hover img { transform: scale(1.025); }

.demo-category > span {
  position: absolute;
  z-index: 1;
  inset: auto 1rem 1rem;
  display: grid;
  gap: 0.15rem;
}

.demo-category strong { font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.1; }
.demo-category small { color: rgb(255 255 255 / 75%); font-size: 0.78rem; }

.demo-products { display: grid; gap: 1.8rem 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-product { min-width: 0; }
.demo-product__image { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-md); background: var(--color-surface-muted); }
.demo-product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms ease; }
.demo-product__image:hover img { transform: scale(1.025); }

.demo-product__image span {
  position: absolute;
  z-index: 1;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: rgb(248 246 240 / 92%);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo-product__details { display: grid; margin-top: 0.7rem; gap: 0.35rem; }
.demo-product h3 { margin: 0; font-family: inherit; font-size: 0.92rem; font-weight: 600; line-height: 1.35; }
.demo-product h3 a { text-decoration: none; }
.demo-product__details > strong { font-size: 0.95rem; }
.demo-disclaimer { margin: 1.5rem 0 0; color: var(--color-text-muted); font-size: 0.75rem; text-align: center; }

.woocommerce ul.products {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 1.75rem 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  display: flex;
  width: auto;
  min-width: 0;
  float: none;
  flex-direction: column;
  margin: 0;
}

.woocommerce ul.products li.product a { text-decoration: none; }

.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0 0 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  padding: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
}

.woocommerce ul.products li.product .price { margin-top: 0.4rem; color: var(--color-text); font-size: 1rem; font-weight: 700; }

.woocommerce ul.products li.product .button {
  width: 100%;
  min-height: 2.8rem;
  margin-top: auto;
  padding: 0.75rem;
  font-size: 0.82rem;
}

.woocommerce span.onsale {
  min-width: auto;
  min-height: auto;
  margin: 0.6rem !important;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #2d2113;
  line-height: 1;
}

.woocommerce ul.products li.product-category a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-brand);
}

.woocommerce ul.products li.product-category img { margin: 0; opacity: 0.72; transition: transform 240ms ease; }

.woocommerce ul.products li.product-category h2 {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 1rem 1rem;
  background: linear-gradient(transparent, rgb(0 0 0 / 76%));
  color: #fff;
  font-size: 1.1rem;
}

.woocommerce ul.products li.product-category mark { display: none; }

.catalog-page__header {
  display: grid;
  max-width: 48rem;
  margin-bottom: var(--space-6);
  gap: var(--space-3);
}

.catalog-page__header > * { margin-block: 0; }
.catalog-page__header > p:last-child { color: var(--color-text-muted); font-size: var(--font-size-lg); }
.catalog { display: grid; gap: var(--space-5); }

.catalog-tabs {
  display: flex;
  margin-inline: calc(-1 * var(--space-4));
  padding-inline: var(--space-4);
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.catalog-tabs::-webkit-scrollbar { display: none; }

.catalog-tabs a {
  display: inline-flex;
  min-height: var(--control-min-size);
  flex: 0 0 auto;
  align-items: center;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
}

.catalog-tabs a[aria-current="page"] { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-on-dark); }
.catalog-search { max-width: 48rem; }
.catalog-search__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }

.catalog-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-3);
}

.catalog-count { margin: 0; color: var(--color-text-muted); font-weight: 700; }
.catalog-sort { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
.catalog-sort label { grid-column: 1 / -1; font-size: var(--font-size-sm); font-weight: 700; }
.catalog-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.catalog-active-filters > span { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 700; }

.catalog-filter-chip {
  display: inline-flex;
  min-height: var(--control-min-size);
  align-items: center;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-decoration: none;
}

.catalog-clear { display: inline-flex; min-height: var(--control-min-size); align-items: center; font-size: var(--font-size-sm); font-weight: 700; }
.catalog-layout { min-width: 0; }
.catalog-sidebar { display: none; }
.catalog-filter-dialog form { display: block; }
.catalog-filter-fields { display: grid; gap: var(--space-5); }
.catalog-filter-fields__prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.catalog-price-input { position: relative; }
.catalog-price-input .field__control { padding-right: 2.5rem; }
.catalog-price-input span { position: absolute; top: 50%; right: var(--space-3); color: var(--color-text-muted); transform: translateY(-50%); }
.catalog-fieldset { display: grid; margin: 0; padding: 0; border: 0; gap: var(--space-2); }
.catalog-fieldset legend { margin-bottom: var(--space-2); font-weight: 800; }
.catalog-fieldset label { display: flex; min-height: var(--control-min-size); align-items: center; gap: var(--space-2); cursor: pointer; }
.catalog-fieldset input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-brand); }
.catalog-results { position: relative; min-width: 0; }
.catalog-products, .catalog-loading { display: grid; gap: var(--space-5) var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-loading { display: none; }
.catalog-loading .skeleton { min-height: 18rem; }
.catalog-results[aria-busy="true"] > :not(.catalog-loading) { visibility: hidden; }
.catalog-results[aria-busy="true"] .catalog-loading { position: absolute; inset: 0; display: grid; }
.catalog-product { min-width: 0; overflow: hidden; }
.catalog-product__image { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-surface-muted); }
.catalog-product__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-normal) ease; }
.catalog-product__image:hover img { transform: scale(1.025); }
.catalog-product__image .badge { position: absolute; z-index: 1; top: var(--space-2); left: var(--space-2); }
.catalog-product.is-sold-out .catalog-product__image img { opacity: 0.58; filter: grayscale(0.35); }
.catalog-product__body { display: grid; align-content: start; gap: var(--space-2); }
.catalog-product__body > * { margin: 0; }
.catalog-product__body .card__title { overflow-wrap: anywhere; font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.catalog-product__body .card__title a { text-decoration: none; }
.catalog-product__condition { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.catalog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: var(--space-7); gap: var(--space-3); }
.catalog-pagination span { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 700; }
.catalog-sidebar__actions { display: grid; margin-top: var(--space-5); gap: var(--space-2); }

.shop-content > .page-title,
.woocommerce-products-header { margin-bottom: var(--space-5); }

@media (max-width: 24rem) {
  .catalog-search__row { grid-template-columns: 1fr; }
}

@media (min-width: 45rem) {
  .woocommerce ul.products { gap: 2.25rem 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-categories { margin-right: 0; padding-right: 0; grid-auto-columns: auto; grid-auto-flow: initial; grid-template-columns: repeat(2, 1fr); overflow: visible; }
  .demo-products { gap: 2.25rem 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-products, .catalog-loading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-sort { width: fit-content; grid-column: auto; grid-template-columns: minmax(12rem, 1fr) auto; justify-self: end; }
  .catalog-toolbar { grid-template-columns: 1fr auto auto; }
  .catalog-filter-button { grid-column: 2; grid-row: 1; }
}

@media (min-width: 56.25rem) {
  .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .woocommerce ul.products li.product .button { width: auto; align-self: start; }
  .demo-categories, .demo-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .button.catalog-filter-button, .catalog-filter-dialog { display: none; }
  .catalog-layout { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); align-items: start; gap: var(--space-6); }
  .catalog-sidebar { position: sticky; top: 7rem; display: block; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
  .catalog-sidebar h2 { margin-top: 0; font-size: var(--font-size-lg); }
  .catalog-products, .catalog-loading { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}