/* ===================================================================
   nozi — redesign 2026: lista produktów / strony kategorii (_t_shop.php)
   Tokeny i komponenty bazowe (product-card, category-tile, faq) są
   w css/redesign.css — tu tylko elementy specyficzne dla listy.
   =================================================================== */

/* --- nagłówek bez okładki (jak page-head podstron) --- */

.rd.shop-head {
    padding-top: 48px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rd.shop-head h1 { font-size: 44px; }

/* --- nagłówek z okładką kategorii (pasek jak /o-nas/, niższy) --- */

.rd.shop-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--rd-dark);
}
.rd .shop-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rd .shop-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 19, 0.1) 0%, rgba(20, 20, 19, 0.62) 100%);
}
.rd .shop-hero__content {
    position: relative;
    width: 100%;
    padding-top: 96px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rd .shop-hero__content h1 { font-size: 48px; color: #ffffff; text-wrap: balance; }

/* --- breadcrumb --- */

.rd .shop-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    color: var(--rd-muted-2);
}
.rd .shop-breadcrumb a { color: var(--rd-muted-2); }
.rd .shop-breadcrumb a:hover { color: var(--rd-text); }
.rd .shop-breadcrumb__current { color: var(--rd-text); font-weight: 500; }

.rd .shop-breadcrumb--light,
.rd .shop-breadcrumb--light a { color: rgba(255, 255, 255, 0.72); }
.rd .shop-breadcrumb--light a:hover { color: #ffffff; }
.rd .shop-breadcrumb--light .shop-breadcrumb__current { color: #ffffff; }

/* --- lead kategorii --- */

.rd .shop-lead {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--rd-text-body);
    margin: 0;
    max-width: 60ch;
}
.rd.shop-hero .shop-lead { color: #e8e8e6; }

/* --- kafelki podkategorii (reuse .category-tile z redesign.css) --- */

.rd.shop-cats { padding-top: 40px; padding-bottom: 8px; }
.rd.shop-cats .eyebrow { margin-bottom: 20px; }
.rd .shop-cats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
}
.rd .category-tile--empty { background: var(--rd-bg-alt); }

/* --- pasek nad siatką: licznik + sortowanie --- */

.rd .shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 36px 0 28px;
}
.rd .shop-toolbar__count { font-size: 14px; color: var(--rd-muted); }
.rd .shop-toolbar__sort {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rd .shop-toolbar__sort label { font-size: 13.5px; color: var(--rd-muted); }
.rd .shop-toolbar__sort select {
    appearance: none;
    -webkit-appearance: none;
    font-family: "Instrument Sans", sans-serif;
    font-size: 14px;
    color: var(--rd-text);
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23232323' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    border: 1px solid var(--rd-line-strong);
    border-radius: 10px;
    padding: 10px 38px 10px 14px;
    cursor: pointer;
}
.rd .shop-toolbar__sort select:focus { outline: none; border-color: var(--rd-accent); }

/* --- siatka produktów: .products__grid/.product-card z redesign.css --- */

.rd.shop-list { padding-bottom: 24px; }

.rd .product-card__omnibus {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--rd-muted-2);
    margin-top: -6px;
}

/* Produkt bez stanu nadal pozostaje dostepny do obejrzenia, ale karta jest
   wyraznie wyciszona. Etykieta pozostaje w pelnym kontrascie. */
.rd .product-card--unavailable .product-card__media > img:not(.product-card__hover),
.rd .product-card--unavailable .product-card__media > .product-card__photo,
.rd .product-card--unavailable .product-card__meta,
.rd .product-card--unavailable .product-card__omnibus {
    opacity: 0.42;
}
.rd .product-card--unavailable:hover .product-card__media > img:not(.product-card__hover),
.rd .product-card--unavailable:hover .product-card__media > .product-card__photo {
    transform: none;
}
.rd .product-card.product-card--unavailable:hover .product-card__media > .product-card__hover {
    opacity: 0;
    transform: none;
}
.rd .product-card__badge--unavailable {
    background: #6b6254;
}

.rd .shop-empty { font-size: 16px; color: var(--rd-muted); padding: 32px 0 48px; margin: 0; }

/* --- stronicowanie --- */

.rd .shop-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 56px;
}
.rd .shop-pagination__page,
.rd .shop-pagination__arrow {
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid var(--rd-line-strong);
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--rd-text);
}
.rd a.shop-pagination__page:hover,
.rd a.shop-pagination__arrow:hover { border-color: var(--rd-accent); color: var(--rd-text); }
.rd .shop-pagination__page--current { background: var(--rd-dark); border-color: var(--rd-dark); color: var(--rd-light); }
.rd .shop-pagination__dots { color: var(--rd-muted-2); padding: 0 2px; }

/* --- powrót do kategorii nadrzędnej --- */

.rd .shop-back { margin: 44px 0 0; }

/* --- opis kategorii pod siatką (SEO) --- */

.rd.shop-seo {
    margin-top: 56px;
    padding-top: 48px;
    padding-bottom: 8px;
    border-top: 1px solid var(--rd-line);
}
.rd .shop-seo__content {
    max-width: 72ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--rd-text-body);
}
.rd .shop-seo__content p { margin: 0 0 1em; }
.rd .shop-seo__content h2,
.rd .shop-seo__content h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    margin: 1.4em 0 0.6em;
}
.rd .shop-seo__content h2 { font-size: 24px; }
.rd .shop-seo__content h3 { font-size: 19px; }
.rd .shop-seo__content img { max-width: 100%; height: auto; border-radius: var(--rd-radius); }

/* --- responsywność --- */

@media (max-width: 900px) {
    .rd.shop-head h1, .rd .shop-hero__content h1 { font-size: 36px; }
    .rd.shop-hero { min-height: 260px; }
    .rd .shop-hero__content { padding-top: 72px; padding-bottom: 32px; }
    .rd .shop-cats__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
}

@media (max-width: 640px) {
    .rd.shop-head { padding-top: 32px; }
    .rd .shop-cats__grid { grid-template-columns: 1fr; grid-auto-rows: 180px; }
    .rd .shop-toolbar { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
}