/* Product Collections Pro — Frontend CSS */

.product-collection {
    margin: 2rem 0;
}

/* Własna siatka — NIE .products .row (custom.css nadpisuje te klasy z !important) */
.pc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

@media (max-width: 991px) {
    .pc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .pc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Reset — custom.css daje .product-miniature max-width, tu resetujemy */
.pc-grid > .product-miniature {
    max-width: 100% !important;
    width: 100% !important;
}

/* Fix: Falcon styluje img wewnątrz swiper/product-thumb-container,
   nasza prostsza struktura potrzebuje explicit width */
.product-collection .product-miniature__thumb-link img {
    width: 100%;
    height: auto;
    display: block;
}

.product-collection .product-miniature__thumb {
    overflow: hidden;
}

/* Nagłówek: H2 po lewej, link po prawej — jak "Zobacz także" */
.collection-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.collection-heading {
    margin: 0;
}

.collection-see-all {
    white-space: nowrap;
    font-size: 0.9rem;
}

/* Opis SEO pod nagłówkiem */
.collection-description {
    margin-bottom: 1rem;
    color: #666;
    font-size: 0.92rem;
    line-height: 1.5;
}

.collection-description p {
    margin: 0;
}

/* Footer z linkiem do hub page */
.collection-footer {
    margin-top: 1.5rem;
}

@media (max-width: 576px) {
    .collection-header {
        flex-direction: column;
        gap: 0.3rem;
    }
}