/**
 * pd_listview – wygląd przełącznika i trzech widoków listy produktów.
 *
 * Arkusz celowo nie jest wpięty w żadną warstwę @layer: motywy trzymają
 * swoje siatki w warstwach, więc bezwarstwowy CSS modułu wygrywa bez
 * konieczności sypania !important.
 *
 * @author    presta.design
 * @copyright 2026 presta.design
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0
 */

/* =====================================================================
   Przełącznik
   ===================================================================== */
.pd-listview-switcher {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.pd-listview-switcher__btn {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #d3d3d3;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #8c8c8c;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.pd-listview-switcher__btn:hover,
.pd-listview-switcher__btn:focus-visible {
  border-color: #8c8c8c;
  color: #383838;
}

.pd-listview-switcher__btn.is-active {
  border-color: currentcolor;
  color: #0197ef;
}

.pd-listview-switcher__icon {
  font-size: 1.375rem;
  line-height: 1;
}

/* Etykieta tekstowa tylko dla czytników ekranu – przycisk jest ikoną. */
.pd-listview-switcher__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================================================
   Widok: siatka
   ===================================================================== */
.pd-listview--grid .products {
  display: grid;
  grid-template-columns: repeat(var(--pd-listview-grid-cols, 4), minmax(0, 1fr));
}

/* =====================================================================
   Widok: lista – zdjęcie po lewej, treść po prawej
   ===================================================================== */
.pd-listview--list .products {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Jedyne dziecko kafla to opakowanie treści (motywy nazywają je różnie:
   .product-miniature__inner, .thumbnail-container), więc bierzemy je
   selektorem strukturalnym zamiast po nazwie klasy. */
.pd-listview--list .product-miniature > * {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
}

.pd-listview--list .product-miniature__top,
.pd-listview--list .thumbnail-top {
  flex: 0 0 14rem;
  max-width: 14rem;
}

.pd-listview--list .product-miniature__bottom,
.pd-listview--list .product-description {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  padding-block-start: 0;
}

.pd-listview--list .product-miniature__infos {
  flex: 1 1 auto;
  min-width: 0;
}

.pd-listview--list .product-miniature__actions {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Podgląd „szybki widok” przykrywa w liście treść kafla – jest zbędny. */
.pd-listview--list .product-miniature__quickview-button {
  display: none;
}

@media (width < 48em) {
  .pd-listview--list .product-miniature__top,
  .pd-listview--list .thumbnail-top {
    flex-basis: 8rem;
    max-width: 8rem;
  }

  .pd-listview--list .product-miniature__bottom,
  .pd-listview--list .product-description {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* =====================================================================
   Widok: zdjęcia – gęsta galeria bez opisów
   ===================================================================== */
.pd-listview--photo .products {
  display: grid;
  grid-template-columns: repeat(var(--pd-listview-photo-cols, 5), minmax(0, 1fr));
  gap: 0.75rem;
}

.pd-listview--photo .product-miniature__bottom,
.pd-listview--photo .product-description {
  display: none;
}

.pd-listview--photo .product-miniature__quickview-button {
  display: none;
}

@media (width < 62em) {
  .pd-listview--photo .products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width < 36em) {
  .pd-listview--grid .products,
  .pd-listview--photo .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}