/* =========================================================================
   ta-shop.css · Widok 10 · Listing (kategoria, tag, sklep, wyszukiwanie produktów)
   WooCommerce: woocommerce/archive-product.php → template-parts/ta-shop.php
   Ładowanie: ta-fonts → ta-tokens → ta-product-card → ta-shop
   Progi (szerokość .ta-shop): telefon < 700 · tablet 700–1199 · desktop ≥ 1200 (≥ 1400 domyślnie 4 kolumny). Mobile-first.
   Uwaga: między .ta-shop a kartą produktu nie może być innego kontenera (karta pyta najbliższy kontener o ≥ 1200 px).
   ========================================================================= */
.ta-shop {
  container: ta-shop / inline-size;
  width: 100%;
  font-family: var(--ta-font);
  color: var(--ta-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  interpolate-size: allow-keywords; /* płynne rozwijanie FAQ (::details-content) */
}
.ta-shop *, .ta-shop *::before, .ta-shop *::after { box-sizing: border-box; }
.ta-shop p { margin: 0; }
.ta-shop svg { display: block; flex: none; }
.ta-shop [hidden] { display: none !important; } /* wyjątek: [hidden] musi wygrać z display:flex/grid */
.ta-shop a:focus-visible, .ta-shop button:focus-visible, .ta-shop summary:focus-visible, .ta-shop select:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }
.ta-shop .ta-shop__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ta-shop .ta-shop__d { display: none; } /* tekst wersji desktop (Filtry / Wyczyść wszystko) */
.ta-shop .ta-shop__notices { padding: 16px 16px 0; }

/* A. Ścieżka */
.ta-shop .ta-shop__crumbs { background: var(--ta-cream); }
.ta-shop .ta-shop__crumbs-in { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 16px; font: 400 12.5px/1.5 var(--ta-font); color: var(--ta-ink-muted); }
.ta-shop .ta-shop__crumbs a { color: var(--ta-ink-muted); text-decoration: none; transition: color .2s ease; }
.ta-shop .ta-shop__crumbs a:hover { color: var(--ta-rust); }
.ta-shop .ta-shop__crumbs [aria-current] { color: var(--ta-ink); }

/* B. Nagłówek */
.ta-shop .ta-shop__head { padding: 18px 16px 0; }
.ta-shop .ta-shop__h1 { margin: 0; font: 300 30px/1.1 var(--ta-font); letter-spacing: -.01em; text-transform: none; color: var(--ta-ink); }
.ta-shop .ta-shop__lead { margin-top: 12px; font: 400 15px/1.65 var(--ta-font); color: var(--ta-ink); text-wrap: pretty; }

/* C. Pasek narzędzi (telefon i tablet: przyklejony) */
.ta-shop .ta-shop__bar { position: sticky; top: var(--ta-sticky-top-m, 0px); z-index: 10; margin-top: 20px; border-top: 1px solid var(--ta-line); border-bottom: 1px solid var(--ta-line); background: var(--ta-white); }
.ta-shop .ta-shop__bar-in { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.ta-shop .ta-shop__filter-btn {
  display: inline-flex; flex: none; align-items: center; gap: 8px; height: 44px; min-height: 0; margin: 0; padding: 0 16px;
  border: 1px solid var(--ta-green); border-radius: var(--ta-radius-sm); background: var(--ta-white); color: var(--ta-green); box-shadow: none;
  font: 500 13px/1 var(--ta-font); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.ta-shop .ta-shop__filter-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ta-shop .ta-shop__filter-btn[aria-expanded="true"] { background: var(--ta-green); color: var(--ta-white); }
.ta-shop:not([data-ta-js]) .ta-shop__filter-btn { display: none; } /* bez JS panel filtrów jest zawsze otwarty */
.ta-shop .ta-shop__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ta-rust); color: var(--ta-white); font: 600 11px/1 var(--ta-font); }
.ta-shop .ta-shop__count { display: none; order: 2; margin: 0; font: 500 14px/1.5 var(--ta-font); color: var(--ta-ink); white-space: nowrap; }
.ta-shop .ta-shop__sort { display: flex; flex: 1; order: 1; align-items: center; gap: 10px; min-width: 0; }
.ta-shop .ta-shop__sort-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ta-shop .ta-shop__select { position: relative; display: flex; flex: 1; min-width: 0; }
.ta-shop .ta-shop__select select {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 34px 0 12px;
  border: 1px solid var(--ta-border); border-radius: var(--ta-radius-sm); background: var(--ta-white); background-image: none; box-shadow: none;
  font: 500 13px/1.2 var(--ta-font); letter-spacing: 0; color: var(--ta-ink); cursor: pointer;
}
.ta-shop .ta-shop__select svg { position: absolute; top: 16px; right: 12px; width: 12px; height: 12px; fill: none; stroke: var(--ta-ink); stroke-width: 1.6; pointer-events: none; }
.ta-shop .ta-shop__select svg { transition: transform .2s var(--ta-ease); }
/* Sortowanie: własna lista (ta-shop.js); ukryty <select> zostaje źródłem wartości */
.ta-shop .ta-shop__select[data-ta-enhanced] select { display: none; }
.ta-shop .ta-shop__sort-btn {
  display: flex; align-items: center; width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0 34px 0 12px;
  border: 1px solid var(--ta-border); border-radius: var(--ta-radius-sm); background: var(--ta-white); box-shadow: none;
  font: 500 13px/1.2 var(--ta-font); letter-spacing: 0; text-transform: none; text-align: left; color: var(--ta-ink); cursor: pointer;
  transition: border-color .2s ease;
}
.ta-shop .ta-shop__sort-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-shop .ta-shop__sort-btn:hover, .ta-shop .ta-shop__select[data-open] .ta-shop__sort-btn { border-color: var(--ta-green); background: var(--ta-white); color: var(--ta-ink); }
.ta-shop .ta-shop__sort-btn:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }
.ta-shop .ta-shop__select[data-open] svg:not(.ta-shop__sort-tick) { transform: rotate(180deg); }
.ta-shop .ta-shop__sort-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; min-width: 100%; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--ta-line); border-radius: var(--ta-radius-md); background: var(--ta-white);
  box-shadow: 0 14px 34px rgba(28, 28, 26, .12), 0 2px 6px rgba(28, 28, 26, .06);
  animation: ta-shop-drop .18s var(--ta-ease);
}
.ta-shop .ta-shop__sort-list[hidden] { display: none; }
.ta-shop .ta-shop__sort-list:focus { outline: none; }
.ta-shop .ta-shop__sort-opt {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 14px 0 12px; border-radius: var(--ta-radius-sm);
  font: 400 14px/1.3 var(--ta-font); color: var(--ta-ink); white-space: nowrap; cursor: pointer; transition: background-color .15s ease;
}
.ta-shop .ta-shop__sort-opt[data-active] { background: var(--ta-cream); }
.ta-shop .ta-shop__sort-list:focus-visible .ta-shop__sort-opt[data-active] { box-shadow: inset 0 0 0 2px var(--ta-green); }
.ta-shop .ta-shop__sort-opt[aria-selected="true"] { font-weight: 500; color: var(--ta-green); }
.ta-shop .ta-shop__select .ta-shop__sort-tick { position: static; flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: var(--ta-green); stroke-width: 2; visibility: hidden; transform: none; transition: none; }
.ta-shop .ta-shop__sort-opt[aria-selected="true"] .ta-shop__sort-tick { visibility: visible; }
@keyframes ta-shop-drop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ta-shop .ta-shop__sort-list { animation: none; } .ta-shop .ta-shop__select svg { transition: none; } }
.ta-shop .ta-shop__cols { display: none; order: 3; gap: 4px; }
.ta-shop .ta-shop__cols button {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0;
  border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); background: var(--ta-white); color: var(--ta-ink-faint); box-shadow: none; cursor: pointer;
}
.ta-shop .ta-shop__cols svg { width: 16px; height: 16px; fill: currentColor; }
.ta-shop .ta-shop__cols button[aria-pressed="true"] { border-color: var(--ta-green); color: var(--ta-green); }

/* D. Filtry: aktywne filtry (D1) + formularz (panel na telefonie i tablecie, kolumna na desktopie) */
.ta-shop .ta-shop__aside { display: flex; flex-direction: column; }
.ta-shop .ta-shop__active { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; }
.ta-shop .ta-shop__active[data-empty] { display: none; }
.ta-shop .ta-shop__active-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ta-shop .ta-shop__active-title { font: 500 12px/1.5 var(--ta-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ta-ink); }
.ta-shop .ta-shop__clear { font: 500 13px/1.5 var(--ta-font); color: var(--ta-ink-muted); text-decoration: underline; text-underline-offset: 4px; }
.ta-shop .ta-shop__clear:hover { color: var(--ta-rust); }
.ta-shop .ta-shop__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ta-shop .ta-shop__chips li { margin: 0; }
.ta-shop .ta-shop__chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: var(--ta-radius-sm);
  background: var(--ta-green); color: var(--ta-white); font: 500 13px/1 var(--ta-font); text-decoration: none; white-space: nowrap; transition: background-color .2s ease;
}
.ta-shop .ta-shop__chip:hover { background: var(--ta-green-hover); color: var(--ta-white); }
.ta-shop .ta-shop__chip-x { font-size: 16px; line-height: 1; }
.ta-shop .ta-shop__results { font: 400 13px/1.5 var(--ta-font); color: var(--ta-ink-muted); }

.ta-shop .ta-shop__filters { order: -1; margin: 0; padding: 4px 16px 20px; border-bottom: 1px solid var(--ta-line); background: var(--ta-white); }
.ta-shop[data-ta-js] .ta-shop__filters:not([data-open]) { display: none; }
.ta-shop .ta-shop__group { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--ta-beige); }
.ta-shop .ta-shop__group:last-of-type { border-bottom: 0; }
.ta-shop .ta-shop__group-head { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0; list-style: none; cursor: pointer; }
.ta-shop .ta-shop__group-head::-webkit-details-marker { display: none; }
.ta-shop .ta-shop__group-title { font: 500 15px/1.5 var(--ta-font); color: var(--ta-ink); }
.ta-shop .ta-shop__sign { font: 300 20px/1.5 var(--ta-font); color: var(--ta-green); }
.ta-shop .ta-shop__sign::before { content: "+"; }
.ta-shop .ta-shop__group[open] .ta-shop__sign::before { content: "−"; }
/* Kolor, Szerokość, Cena: na telefonie sam tytuł (bez zwijania, jak w makiecie) */
.ta-shop .ta-shop__group--plain { padding-bottom: 18px; }
.ta-shop .ta-shop__group--plain .ta-shop__group-head { height: auto; margin-bottom: 14px; padding-top: 14px; cursor: default; }
.ta-shop .ta-shop__group--plain .ta-shop__sign { display: none; }

.ta-shop .ta-shop__opt input, .ta-shop .ta-shop__swatch input, .ta-shop .ta-shop__size input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.ta-shop .ta-shop__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; padding: 0 0 16px; }
.ta-shop .ta-shop__opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0; font-weight: 400; cursor: pointer; }
.ta-shop .ta-shop__box { display: flex; flex: 0 0 20px; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--ta-dashed); border-radius: 3px; background: var(--ta-white); transition: background-color .2s ease, border-color .2s ease; }
.ta-shop .ta-shop__box svg { width: 11px; height: 11px; fill: none; stroke: var(--ta-white); stroke-width: 2; opacity: 0; }
.ta-shop .ta-shop__opt input:checked + .ta-shop__box { border-color: var(--ta-green); background: var(--ta-green); }
.ta-shop .ta-shop__opt input:checked + .ta-shop__box svg { opacity: 1; }
.ta-shop .ta-shop__opt-label { flex: 1; min-width: 0; font: 400 14px/1.5 var(--ta-font); color: var(--ta-ink); }
.ta-shop .ta-shop__opt-n { font: 400 13px/1.5 var(--ta-font); color: var(--ta-ink-muted); font-variant-numeric: tabular-nums; }

.ta-shop .ta-shop__swatches { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.ta-shop .ta-shop__swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 64px; margin: 0; font-weight: 400; cursor: pointer; }
.ta-shop .ta-shop__dot { display: block; width: 38px; height: 38px; border: 2px solid var(--ta-white); border-radius: 50%; background: var(--ta-swatch, var(--ta-thumb)); box-shadow: 0 0 0 1px var(--ta-border); transition: box-shadow .2s ease; }
.ta-shop .ta-shop__swatch input:checked + .ta-shop__dot { box-shadow: 0 0 0 2px var(--ta-green); }
.ta-shop .ta-shop__swatch-name { font: 400 12px/1.2 var(--ta-font); color: var(--ta-ink); text-align: center; }

.ta-shop .ta-shop__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.ta-shop .ta-shop__size { position: relative; display: block; margin: 0; font-weight: 400; cursor: pointer; }
.ta-shop .ta-shop__size span {
  display: flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm);
  background: transparent; color: var(--ta-ink); font: 500 13px/1 var(--ta-font); white-space: nowrap; transition: box-shadow .2s ease, background-color .2s ease;
}
.ta-shop .ta-shop__size input:checked + span { background: var(--ta-white); box-shadow: inset 0 0 0 2px var(--ta-green); }
.ta-shop .ta-shop__opt input:focus-visible + .ta-shop__box, .ta-shop .ta-shop__size input:focus-visible + span { outline: 2px solid var(--ta-green); outline-offset: 2px; }
.ta-shop .ta-shop__swatch input:focus-visible + .ta-shop__dot { outline: 2px solid var(--ta-green); outline-offset: 3px; }

/* D5. Cena: dwa suwaki na jednym torze; --ta-a / --ta-b = położenie uchwytów (0–1) */
.ta-shop .ta-shop__range { position: relative; height: 20px; margin: 0 10px 0 0; }
.ta-shop .ta-shop__range::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--ta-line); }
.ta-shop .ta-shop__range-fill { position: absolute; top: 9px; left: calc(8px + var(--ta-a, 0) * (100% - 8px)); width: calc((var(--ta-b, 1) - var(--ta-a, 0)) * (100% - 8px)); height: 2px; background: var(--ta-green); }
.ta-shop .ta-shop__range input {
  position: absolute; top: 0; left: -2px; z-index: 1; width: calc(100% + 12px); height: 20px; min-height: 0; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; -webkit-appearance: none; appearance: none; pointer-events: none;
}
.ta-shop .ta-shop__range input:focus { outline: none; }
.ta-shop .ta-shop__range input::-webkit-slider-runnable-track { height: 20px; border: 0; background: transparent; }
.ta-shop .ta-shop__range input::-moz-range-track { height: 20px; border: 0; background: transparent; }
.ta-shop .ta-shop__range input::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--ta-green); border-radius: 50%; background: var(--ta-white); cursor: pointer; pointer-events: auto; }
.ta-shop .ta-shop__range input::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border: 2px solid var(--ta-green); border-radius: 50%; background: var(--ta-white); cursor: pointer; pointer-events: auto; }
.ta-shop .ta-shop__range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--ta-white), 0 0 0 4px var(--ta-green); }
.ta-shop .ta-shop__range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--ta-white), 0 0 0 4px var(--ta-green); }
.ta-shop .ta-shop__price-vals { display: flex; justify-content: space-between; margin-top: 10px; font: 400 13px/1.5 var(--ta-font); color: var(--ta-ink); font-variant-numeric: tabular-nums; }

/* D6. Przyciski panelu */
.ta-shop .ta-shop__filters-foot { display: flex; gap: 8px; }
.ta-shop .ta-shop__reset { display: flex; flex: none; align-items: center; height: 50px; padding: 0 18px; border: 1px solid var(--ta-border); border-radius: var(--ta-radius-sm); background: var(--ta-white); color: var(--ta-ink); font: 500 13px/1 var(--ta-font); text-decoration: none; white-space: nowrap; }
.ta-shop .ta-shop__apply {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: .35em; height: 50px; min-height: 0; margin: 0; padding: 0 12px;
  border: 0; border-radius: var(--ta-radius-sm); background: var(--ta-green); color: var(--ta-white); box-shadow: none;
  font: 500 13px/1 var(--ta-font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .2s ease;
}
.ta-shop .ta-shop__apply:hover { background: var(--ta-green-hover); }

/* E. Siatka (karta = ta-product-card.css) */
.ta-shop .ta-shop__main { min-width: 0; }
.ta-shop .ta-shop__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 16px 16px 0; list-style: none; transition: opacity .2s ease; }
.ta-shop .ta-shop__item { display: flex; min-width: 0; margin: 0; }
.ta-shop .ta-shop__item > .ta-pcard { flex: 1; min-width: 0; }
.ta-shop[aria-busy="true"] .ta-shop__grid { opacity: .5; pointer-events: none; }
.ta-shop .ta-shop__skel { display: none; }
.ta-shop .ta-shop__skel-img { display: block; aspect-ratio: 4 / 5; background-color: var(--ta-beige); background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--ta-white) 65%, transparent) 50%, transparent 100%); background-repeat: no-repeat; background-size: 460px 100%; animation: ta-shimmer 1.2s linear infinite; }
.ta-shop .ta-shop__skel-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.ta-shop .ta-shop__skel-line { display: block; height: 14px; border-radius: 3px; background: var(--ta-beige); }
.ta-shop .ta-shop__skel-line:nth-child(1) { width: 85%; }
.ta-shop .ta-shop__skel-line:nth-child(2) { width: 55%; }
.ta-shop .ta-shop__skel-line:nth-child(3) { width: 35%; height: 16px; margin-top: 6px; background: var(--ta-sand); }
.ta-shop .ta-shop__skel-line:nth-child(4) { height: 40px; margin-top: 6px; border: 1px solid var(--ta-beige); border-radius: var(--ta-radius-sm); background: transparent; }
@keyframes ta-shimmer { 0% { background-position: -460px 0; } 100% { background-position: 460px 0; } }

/* E1. Brak wyników */
.ta-shop .ta-shop__empty { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 16px 16px 0; padding: 36px 20px; border: 1px dashed var(--ta-border); border-radius: var(--ta-radius-md); text-align: center; }
.ta-shop .ta-shop__empty-title { font: 300 24px/1.2 var(--ta-font); color: var(--ta-ink); text-wrap: balance; }
.ta-shop .ta-shop__empty-text { max-width: 420px; font: 400 14px/1.6 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }
.ta-shop .ta-shop__empty-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; margin-top: 6px; padding: 0 28px; border: 1px solid var(--ta-green); border-radius: var(--ta-radius-sm);
  color: var(--ta-green); font: 500 14px/1 var(--ta-font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease;
}
.ta-shop .ta-shop__empty-btn:hover { background: var(--ta-green); color: var(--ta-white); }

/* F. Więcej produktów */
.ta-shop .ta-shop__more { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 36px; padding: 0 16px; }
.ta-shop .ta-shop__progress-text { font: 400 14px/1.5 var(--ta-font); color: var(--ta-ink-muted); }
.ta-shop .ta-shop__progress { display: block; width: 200px; height: 2px; background: var(--ta-line); }
.ta-shop .ta-shop__progress-fill { display: block; width: var(--ta-shown, 0%); height: 100%; background: var(--ta-green); transition: width .8s var(--ta-ease); }
.ta-shop .ta-shop__more-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 360px; height: 50px; padding: 0 32px;
  border: 1px solid var(--ta-green); border-radius: var(--ta-radius-sm); background: transparent; color: var(--ta-green);
  font: 500 14px/1 var(--ta-font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.ta-shop .ta-shop__more-btn:hover, .ta-shop .ta-shop__more-btn[aria-busy="true"] { background: var(--ta-green); color: var(--ta-white); }
.ta-shop .ta-shop__more-btn[aria-busy="true"] { cursor: wait; }
.ta-shop .ta-shop__spin { display: none; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ta-spin .7s linear infinite; }
@keyframes ta-spin { to { transform: rotate(360deg); } }
.ta-shop .ta-shop__pages { display: none; }

/* H. Pomoc (telefon/tablet: na końcu opisu; desktop: w kolumnie filtrów) */
.ta-shop .ta-shop__help { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 32px; padding: 22px; border-radius: var(--ta-radius-md); background: var(--ta-cream); }
.ta-shop .ta-shop__help--side { display: none; }
.ta-shop .ta-shop__help-title { font: 500 16px/1.5 var(--ta-font); color: var(--ta-ink); }
.ta-shop .ta-shop__help-text { font: 400 14px/1.6 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }
.ta-shop .ta-shop__help-btn {
  display: inline-flex; align-items: center; height: 46px; margin-top: 6px; padding: 0 22px; border: 1px solid var(--ta-green); border-radius: var(--ta-radius-sm);
  color: var(--ta-green); font: 500 14px/1 var(--ta-font); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease;
}
.ta-shop .ta-shop__help-btn:hover { background: var(--ta-green); color: var(--ta-white); }

/* G. Opis kategorii i FAQ */
.ta-shop .ta-shop__seo { margin-top: 56px; padding: 40px 16px 56px; background: var(--ta-white); }
.ta-shop .ta-shop__seo-in { max-width: 1360px; margin: 0 auto; }
.ta-shop .ta-shop__seo-text > :first-child { margin-top: 0; }
.ta-shop .ta-shop__seo-text h2 { margin: 0; font: 300 24px/1.2 var(--ta-font); letter-spacing: -.01em; text-transform: none; color: var(--ta-ink); text-wrap: balance; }
.ta-shop .ta-shop__seo-text h3 { margin: 24px 0 0; font: 500 16px/1.3 var(--ta-font); letter-spacing: 0; text-transform: none; color: var(--ta-ink); }
.ta-shop .ta-shop__seo-text p, .ta-shop .ta-shop__seo-text ul, .ta-shop .ta-shop__seo-text ol { margin: 8px 0 0; font: 400 14px/1.7 var(--ta-font); color: var(--ta-ink-muted); }
.ta-shop .ta-shop__seo-text ul, .ta-shop .ta-shop__seo-text ol { padding-left: 20px; }
.ta-shop .ta-shop__seo-text li { margin: 0; }
.ta-shop .ta-shop__seo-text h2 + h3, .ta-shop .ta-shop__seo-text h2 + p { margin-top: 28px; }
.ta-shop .ta-shop__seo-text a { color: var(--ta-green); text-decoration: underline; text-decoration-color: var(--ta-rust); text-underline-offset: 4px; }
.ta-shop .ta-shop__faq-title { margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--ta-line); font: 500 22px/1.25 var(--ta-font); letter-spacing: 0; text-transform: none; color: var(--ta-ink); }
.ta-shop .ta-shop__faq--first .ta-shop__faq-title { margin-top: 0; padding-top: 0; border-top: 0; }
.ta-shop .ta-shop__faq-list { margin-top: 8px; }
.ta-shop .ta-shop__faq-item { margin: 0; border-bottom: 1px solid var(--ta-line); }
.ta-shop .ta-shop__faq-item::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.ta-shop .ta-shop__faq-item[open]::details-content { block-size: auto; }
.ta-shop .ta-shop__faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; }
.ta-shop .ta-shop__faq-q::-webkit-details-marker { display: none; }
.ta-shop .ta-shop__faq-q-text { font: 400 16px/1.45 var(--ta-font); color: var(--ta-ink); }
.ta-shop .ta-shop__faq-icon { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--ta-line); border-radius: 50%; color: var(--ta-green); font: 300 18px/1 var(--ta-font); transition: transform .3s ease; }
.ta-shop .ta-shop__faq-item[open] .ta-shop__faq-icon { transform: rotate(45deg); }
.ta-shop .ta-shop__faq-a { display: flex; flex-direction: column; gap: 12px; padding: 0 0 20px; }
.ta-shop .ta-shop__faq-a p { font: 400 14px/1.7 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }
.ta-shop .ta-shop__faq-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ta-shop .ta-shop__faq-link { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1.5 var(--ta-font); color: var(--ta-green); text-decoration: underline; text-decoration-color: var(--ta-rust); text-underline-offset: 5px; }
.ta-shop .ta-shop__faq-link svg { display: none; }

/* Tablet 700–1199 */
@container ta-shop (min-width: 700px) {
  .ta-shop .ta-shop__reset, .ta-shop .ta-shop__apply { font-size: 14px; }
  .ta-shop .ta-shop__notices { padding: 16px 32px 0; }
  .ta-shop .ta-shop__crumbs-in { padding: 14px 32px; }
  .ta-shop .ta-shop__head { padding: 18px 32px 0; }
  .ta-shop .ta-shop__h1 { font-size: 40px; }
  .ta-shop .ta-shop__bar-in { padding: 10px 32px; }
  .ta-shop .ta-shop__count { display: block; flex: none; padding-left: 8px; }
  .ta-shop .ta-shop__active { padding: 14px 32px 12px; }
  .ta-shop .ta-shop__results { display: none; }
  .ta-shop .ta-shop__filters { padding: 4px 32px 20px; }
  .ta-shop .ta-shop__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-shop .ta-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 16px 32px 0; }
  .ta-shop .ta-shop__empty { margin: 16px 32px 0; }
  .ta-shop .ta-shop__more { padding: 0 32px; }
  .ta-shop .ta-shop__seo { margin-top: 72px; padding: 40px 32px 56px; }
  .ta-shop .ta-shop__seo-text h2 { font-size: 30px; }
}

/* Desktop ≥ 1200 */
@container ta-shop (min-width: 1200px) {
  .ta-shop .ta-shop__d { display: inline; }
  .ta-shop .ta-shop__m { display: none; }
  .ta-shop .ta-shop__notices { max-width: 1440px; margin: 0 auto; padding: 20px 40px 0; }
  .ta-shop .ta-shop__crumbs-in { max-width: 1440px; margin: 0 auto; gap: 10px; padding: 20px 40px; font-size: 13px; }
  .ta-shop .ta-shop__sep { color: var(--ta-dashed); }
  .ta-shop .ta-shop__head { max-width: 1440px; margin: 0 auto; padding: 28px 40px 0; }
  .ta-shop .ta-shop__h1 { font-size: 44px; }
  .ta-shop .ta-shop__lead { margin-top: 14px; line-height: 1.7; }

  .ta-shop .ta-shop__bar { position: static; max-width: 1440px; margin: 0 auto; padding: 32px 40px 0; border: 0; background: none; }
  .ta-shop .ta-shop__bar-in { gap: 24px; padding: 14px 0; border-top: 1px solid var(--ta-line); border-bottom: 1px solid var(--ta-line); }
  .ta-shop .ta-shop__filter-btn { display: none; }
  .ta-shop .ta-shop__count { order: 0; padding: 0; font-size: 16px; }
  .ta-shop .ta-shop__sort { flex: none; order: 1; margin-left: auto; }
  .ta-shop .ta-shop__sort-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font: 400 14px/1.5 var(--ta-font); color: var(--ta-ink-muted); }
  .ta-shop .ta-shop__select { flex: none; }
  .ta-shop .ta-shop__select select { width: auto; height: 40px; padding: 0 40px 0 14px; border-color: var(--ta-line); font-size: 14px; }
  .ta-shop .ta-shop__select svg { top: 14px; right: 14px; stroke-width: 1.5; }
  .ta-shop .ta-shop__sort-btn { width: auto; min-width: 210px; height: 40px; padding: 0 40px 0 14px; border-color: var(--ta-line); font-size: 14px; }
  .ta-shop .ta-shop__sort-list { left: auto; right: 0; min-width: 100%; width: max-content; }
  .ta-shop .ta-shop__sort-opt { min-height: 40px; }
  .ta-shop[data-ta-js] .ta-shop__cols { display: flex; }

  .ta-shop .ta-shop__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1440px; margin: 0 auto; padding: 32px 40px 0; }
  .ta-shop .ta-shop__aside { gap: 24px; }
  .ta-shop .ta-shop__active, .ta-shop .ta-shop__active[data-empty] { display: flex; gap: 24px; padding: 0; }
  .ta-shop .ta-shop__active[data-empty] .ta-shop__clear { display: none; }
  .ta-shop .ta-shop__active-title { letter-spacing: .16em; color: var(--ta-ink-muted); }
  .ta-shop .ta-shop__clear { padding: 0; font-weight: 400; }
  .ta-shop .ta-shop__chip { height: 34px; padding: 0 12px; }

  .ta-shop .ta-shop__filters, .ta-shop[data-ta-js] .ta-shop__filters:not([data-open]) { display: flex; flex-direction: column; gap: 24px; order: 0; padding: 0; border: 0; background: none; }
  .ta-shop .ta-shop__group, .ta-shop .ta-shop__group--plain { padding: 20px 0 0; border: 0; border-top: 1px solid var(--ta-line); }
  .ta-shop .ta-shop__group-head, .ta-shop .ta-shop__group--plain .ta-shop__group-head { height: auto; margin: 0; padding: 0; cursor: pointer; }
  .ta-shop .ta-shop__group--plain .ta-shop__sign { display: inline; }
  .ta-shop .ta-shop__sign { font-size: 22px; color: var(--ta-ink-muted); }
  .ta-shop .ta-shop__opts { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; padding: 0; }
  .ta-shop .ta-shop__opt { min-height: 0; }
  .ta-shop .ta-shop__box { flex-basis: 18px; width: 18px; height: 18px; }
  .ta-shop .ta-shop__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; margin-top: 16px; }
  .ta-shop .ta-shop__swatch { width: auto; }
  .ta-shop .ta-shop__dot { width: 34px; height: 34px; border-color: var(--ta-cream); }
  .ta-shop .ta-shop__sizes { margin-top: 14px; }
  .ta-shop .ta-shop__size span { height: 38px; padding: 0 12px; }
  .ta-shop .ta-shop__range { margin-top: 20px; }
  .ta-shop[data-ta-js] .ta-shop__filters-foot { display: none; }

  .ta-shop .ta-shop__help--side { display: block; margin: 0; padding: 20px; background: var(--ta-green-tint); }
  .ta-shop .ta-shop__help--side .ta-shop__help-title { color: var(--ta-ink); }
  .ta-shop .ta-shop__help--side .ta-shop__help-text { margin-top: 6px; line-height: 1.5; color: var(--ta-green); }
  .ta-shop .ta-shop__help--side .ta-shop__help-btn { height: 40px; margin-top: 14px; padding: 0 18px; border: 0; background: var(--ta-rust); color: var(--ta-white); font-size: 14px; }
  .ta-shop .ta-shop__help--side .ta-shop__help-btn:hover { background: var(--ta-rust-hover); color: var(--ta-white); }
  .ta-shop .ta-shop__help--seo, .ta-shop .ta-shop__seo--help { display: none; }

  .ta-shop .ta-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 0; }
  .ta-shop[data-cols="3"] .ta-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .ta-shop[data-cols="4"] .ta-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .ta-shop .ta-shop__skel { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--ta-radius-md); background: var(--ta-white); }
  .ta-shop .ta-shop__empty { gap: 16px; margin: 0; padding: 64px 40px; border: 0; background: var(--ta-beige); }
  .ta-shop .ta-shop__empty-title { font-size: 30px; line-height: 1.5; }
  .ta-shop .ta-shop__empty-text { max-width: 480px; font-size: 15px; }
  .ta-shop .ta-shop__empty-btn { height: 50px; margin-top: 8px; padding: 0 30px; font-size: 14px; letter-spacing: .12em; }

  .ta-shop .ta-shop__more { gap: 16px; margin-top: 48px; padding: 0; }
  .ta-shop .ta-shop__progress { width: 240px; }
  .ta-shop .ta-shop__more-btn { width: auto; min-width: 220px; max-width: none; height: 48px; }
  .ta-shop .ta-shop__more-btn[aria-busy="true"] .ta-shop__spin { display: block; }
  .ta-shop .ta-shop__pages { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
  .ta-shop .ta-shop__page { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--ta-line); border-radius: var(--ta-radius-sm); color: var(--ta-ink); font: 400 14px/1 var(--ta-font); text-decoration: none; transition: border-color .2s ease, color .2s ease; }
  .ta-shop a.ta-shop__page:hover { border-color: var(--ta-green); color: var(--ta-green); }
  .ta-shop .ta-shop__page[aria-current] { border-color: var(--ta-green); background: var(--ta-green); color: var(--ta-white); font-weight: 500; }
  .ta-shop .ta-shop__page--dots { border-color: transparent; }

  .ta-shop .ta-shop__seo { margin-top: 96px; padding: 80px 40px 88px; }
  .ta-shop .ta-shop__seo-text h2 { font: 500 32px/1.15 var(--ta-font); letter-spacing: -.01em; text-wrap: wrap; }
  .ta-shop .ta-shop__seo-text h3 { margin-top: 32px; font-size: 18px; }
  .ta-shop .ta-shop__seo-text h2 + h3, .ta-shop .ta-shop__seo-text h2 + p { margin-top: 28px; }
  .ta-shop .ta-shop__seo-text p, .ta-shop .ta-shop__seo-text ul, .ta-shop .ta-shop__seo-text ol { margin-top: 10px; font-size: 15px; line-height: 1.75; }
  .ta-shop .ta-shop__faq-title { margin-top: 64px; padding-top: 56px; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
  .ta-shop .ta-shop__faq-list { margin-top: 20px; }
  .ta-shop .ta-shop__faq-q { gap: 20px; padding: 22px 0; }
  .ta-shop .ta-shop__faq-q-text { font-size: 18px; line-height: 1.5; }
  .ta-shop .ta-shop__faq-a { gap: 14px; padding: 0 60px 24px 0; }
  .ta-shop .ta-shop__faq-a p { font-size: 15px; }
  .ta-shop .ta-shop__faq-links { gap: 8px 24px; }
  .ta-shop .ta-shop__faq-link {
    padding-bottom: 3px; text-decoration: none;
    background-image: linear-gradient(var(--ta-rust), var(--ta-rust)); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px;
    transition: background-size .35s var(--ta-ease), color .2s ease;
  }
  .ta-shop .ta-shop__faq-link:hover { color: var(--ta-rust); background-size: 100% 2px; }
  .ta-shop .ta-shop__faq-link svg { display: block; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
}

/* Desktop ≥ 1400: domyślnie 4 kolumny (wybór 3/4 użytkownika ma pierwszeństwo) */
@container ta-shop (min-width: 1400px) {
  .ta-shop .ta-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ta-shop * { transition: none !important; animation: none !important; } }