/**
 * Style dla przełącznika widoku Grid/List
 */

/* ==========================================================================
   STYLE PRZYCISKÓW TOGGLE
   ========================================================================== */

#grid-view,
#list-view {
  padding: 10px 16px;
  border: 1px solid rgba(238, 238, 238, 1);
  background-color: #fff;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 4px;
}

#grid-view.active,
#list-view.active {
  border-color: transparent;
  background-color: var(--main-accent, black);
  color: #fff;
}

#grid-view:focus,
#list-view:focus {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* ==========================================================================
   GRID VIEW (domyślny)
   ========================================================================== */

.products-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.products-container .product-loop {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   LIST VIEW
   ========================================================================== */

.products-container.list-view {
  grid-template-columns: 1fr;
  grid-gap: var(--gap-150-1) !important;
}

.products-container.list-view .product-loop {
  flex-direction: row;
  gap: 20px;
}

/* Lista: obraz po lewej */
.products-container.list-view .product-loop img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
}

/* Lista: content zawijający obraz */
.products-container.list-view .product-loop > div:not(img) {
  width: fit-content;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet - 2 kolumny */
@media (max-width: 1024px) {
  .products-container {
    grid-template-columns: calc(50% - var(--gap-1-05) / 2) calc(
        50% - var(--gap-1-05) / 2
      );
  }

  .products-container.list-view .product-loop img {
    width: 150px;
    height: 150px;
  }
}

/* Mobile - 1 kolumna */
@media (max-width: 768px) {
  .products-container {
    grid-template-columns: calc(50% - var(--gap-1-05) / 2) calc(
        50% - var(--gap-1-05) / 2
      );
  }

  #grid-view,
  #list-view {
    padding: 8px 12px;
    font-size: 13px;
  }

  .products-container.list-view .product-loop {
    flex-direction: column;
    gap: 0;
  }

  .products-container.list-view .product-loop img {
    width: 100%;
    height: auto;
  }
}

/* Bardzo małe ekrany */
@media (max-width: 480px) {
  .products-container {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #grid-view,
  #list-view {
    padding: 6px 10px;
    font-size: 12px;
  }
}