/* product-catalog.css — layout for /produkty (src/templates/page_products_catalog.php)
   Horizontal alignment/max-width comes from the site's own .container.container-large
   wrapper (applied in markup) — this file only adds vertical spacing + component look.
   .container-large itself carries no rules anywhere else in the codebase, so overriding
   it here only affects this page — the site's other .container.container-large usages
   (e.g. homepage sections) keep the base 2rem padding untouched. */
@media (max-width: 768px) {
    .container-large {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.catalog-breadcrumb {
    margin: 20px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.9rem;
    color: #777;
}

.catalog-breadcrumb a {
    color: #777;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.catalog-breadcrumb a:hover {
    color: var(--clr-green, #73b7ab);
}

.catalog-breadcrumb .crumb-arrow {
    width: 14px;
    height: 14px;
    color: #ccc;
    flex-shrink: 0;
}

.catalog-breadcrumb .crumb-home svg {
    display: block;
    width: 17px;
    height: 17px;
}

/* Last crumb, current page (e.g. product name on the product detail page) — plain text,
   no link, since the breadcrumb component is now also used there (see product_detail.php),
   not just on /produkty where every crumb used to be a link. */
.catalog-breadcrumb .crumb-current {
    color: var(--text-dark, #333);
    font-weight: 600;
}

.catalog-header {
    text-align: left;
}

.catalog-header .section-title {
    margin-top: 0.6rem;
}

.catalog-intro {
    margin: 0 0 2.5rem;
    color: #666;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .catalog-intro {
        margin: 0 0 1rem 0;
        font-size: 14px;
    }
}

.catalog-subcategories {
    margin: 4rem 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .catalog-subcategories {
        margin: 2rem 0;
    }
}

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

@media (max-width: 900px) {
    .catalog-subcategories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .catalog-subcategories {
        gap: 8px;
    }
}

.catalog-subcategory-card {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 6px 12px 6px 8px;
    border-radius: var(--radius-card, 15px);
    border: 2px solid var(--clr-green, #73b7ab);
    transition: background 0.2s ease;
}

.catalog-subcategory-card:hover {
    background: var(--clr-beige, #f8f4ee);
}

@media (max-width: 480px) {
    .catalog-subcategory-card {
        gap: 6px;
        padding: 4px 8px 4px 6px;
    }

    .catalog-subcategory-card span {
        font-size: 0.8rem;
    }
}

.catalog-subcategory-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 10px;
}

@media (max-width: 480px) {
    .catalog-subcategory-card img {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }
}

.catalog-subcategory-card span {
    font-weight: 600;
    font-size: 0.9rem;
}

.catalog-products {
    margin: 20px 0 60px;
}

/* Sort tabs use the shared components/tabs.css (.tabs-nav/.tab-btn/.tab-content) — this
   is just the product grid + "load more" that live inside that .tab-content panel. */
/* minmax's first value is a floor, not a cap — a column is never forced narrower than
   this, so the grid drops a column (instead of shrinking cards) the moment it no longer
   fits, and only then. 300px rather than .product-card's full 350px max-width: the page
   itself is capped at 1400px (.app-card, styles.css) regardless of monitor size, so a
   350px floor would never fit more than 3 columns even at the widest possible viewport —
   300px lets 4 fit inside that same 1400px ceiling. */
.pcg-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    justify-content: center;
    justify-items: center;
}

.pcg-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pcg-loadmore[hidden] {
    display: none;
}

.catalog-cta-band {
    width: 100%;
    background-color: #fff;
    padding: 60px 0;
}

/* Two cards side by side — left = individual shoppers, right = groups/institutions.
   Each card is self-contained (icon, heading, text, CTA, own 2x2 benefit grid) rather
   than one shared band, since the two audiences need different copy and a different CTA
   target, not just different benefit bullets under one generic headline. */
.catalog-cta-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    align-items: stretch;
}

.catalog-cta-card {
    background-color: var(--clr-beige, #f8f4ee);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.catalog-cta-card-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--clr-scented-levander, #8f7fc8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 1.25rem;
}

.catalog-cta-card-icon svg {
    width: 38px;
    height: 38px;
}

.catalog-cta-card h2 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.catalog-cta-card p {
    color: #666;
    max-width: 420px;
    margin: 0 auto 1.5rem;
}

.catalog-cta-card .btn {
    margin-bottom: 2.5rem;
}

/* B2B benefits grid — same visual language as the site's other .benefit-item usages
   (homepage "O nás" section, assets/css/b2b-notice.css), reproduced here self-contained
   since this page doesn't load those files. */
.catalog-cta-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    width: 100%;
}

.catalog-cta-benefits .benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

.catalog-cta-benefits .benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.catalog-cta-benefits .benefit-icon svg {
    width: 26px;
    height: 26px;
}

.catalog-cta-benefits .benefit-item--levander .benefit-icon {
    color: var(--clr-scented-levander, #8f7fc8);
}

.catalog-cta-benefits .benefit-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
}

.catalog-cta-benefits .benefit-sub {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-light);
    margin: 0;
    line-height: 1.4;
}

/* Right card has 3 icons in a row, not the left card's usual 2x2 of 4. */
.catalog-cta-benefits--group {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .catalog-cta-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .catalog-cta-benefits--group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .catalog-cta-band {
        padding: 2rem 0;
    }

    .catalog-cta-card {
        padding: 2rem 1.25rem;
    }

    .catalog-cta-benefits {
        gap: 1.25rem;
    }
}