/* Opis produktu (product-description.js). TEN SAM PLIK jest w frontend-store/ i frontend-admin/ (podgląd
   w edytorze opisu); test pilnuje, żeby się nie rozjechały.
   Kolory biorą się z motywu sklepu (--green, --lime, --mint…), więc opis zmienia się razem z motywem,
   świętem i piaskownicą. Rozmiary tekstu w rem (A−/A+), treść co najmniej 1rem, napisy pomocnicze ≥ .75rem. */

/* ---- zwykły opis (akapity i listy, także stare opisy bez sekcji) ---------------------------------------- */
.product-description { max-width: 78ch; color: #37443c; font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.product-description p { margin: 0 0 14px; }
.product-description :is(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.product-description li { margin: 4px 0; }
.product-description .check-list { padding-left: 0; list-style: none; }
.product-description .check-list li { position: relative; padding-left: 32px; }
.product-description .check-list li::before { content: "✓"; position: absolute; top: .2em; left: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--success); color: #fff; font-size: .8125rem; font-weight: 900; line-height: 1; }
.product-description h3 { margin: 20px 0 6px; color: var(--green); font-size: 1.0625rem; }
.product-description h4 { margin: 18px 0 6px; color: var(--green); font-size: 1rem; }
.product-description strong { color: var(--ink); font-weight: 700; }
.product-description a { color: var(--green); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.product-description a:hover { color: var(--green-dark); }
.product-description hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line); }
.product-description table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.product-description :is(th, td) { padding: .6rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.product-description thead th { background: var(--mint); color: var(--green); font-weight: 800; }
.product-description tbody tr:nth-child(even) { background: var(--surface-soft); }
.tdesc-note { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--mint); color: var(--ink); }
.tdesc-note--warn { border-color: #f1d9a6; background: var(--warning); color: var(--warning-ink); }
.tdesc-note--warn strong { color: var(--warning-strong); }
/* „[DO SPRAWDZENIA: …]” widać tylko w podglądzie panelu: opisu z takim miejscem nie da się zapisać. */
.tdesc-review { padding: 0 .2em; border-radius: 4px; background: #ffe1e3; color: #7a1d26; outline: 2px dashed #c0392b; outline-offset: 1px; }

/* ---- opis z sekcjami: strona sprzedażowa produktu ------------------------------------------------------ */
/* Na górze spis treści z pigułek („W skrócie”, 01, 02…), pod nim „Poznaj produkt” (app.js)
   i wstęp z paskiem, potem karty sekcji (każdy rodzaj ma swój projekt) przedzielone linią z rombem, z dużymi
   odstępami. Układ zależy od szerokości opisu (zapytania o kontener), więc podgląd w panelu wygląda jak sklep
   w tej samej szerokości. */
.product-description:has(> .tdesc) { max-width: none; }
.tdesc { container: tdesc / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25rem; max-width: 60rem; }
.tdesc > * { min-width: 0; }
.tdesc > :is(p, ul, ol, h3, h4, table, .tdesc-table-wrap, .tdesc-callout) { margin: 0; }
/* Listy z własnym wyglądem nie mają wcięcia ani odstępów zwykłej listy opisu. */
.tdesc :is(.tdesc-tiles, .tdesc-list, .tdesc-steps) { padding: 0; }
.tdesc :is(.tdesc-tiles, .tdesc-list, .tdesc-steps) > li { margin: 0; }
.tdesc svg { display: block; }

/* „W skrócie”: tytuł opisu od sklepu (pod spisem treści) i wstęp. */
.tdesc-intro { display: grid; gap: 1.25rem; scroll-margin-top: calc(var(--header-offset, 0px) + 5.5rem); }
.tdesc-intro:focus { outline: none; }
.tdesc-intro:focus-visible { outline: 3px solid var(--focus-ring, var(--green)); outline-offset: 6px; border-radius: 6px; }
.tdesc .tdesc-intro > * { margin: 0; }
.tdesc .tdesc-title { margin: 0; color: var(--ink); font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; }

/* Wstęp: większy tekst z paskiem, nazwa produktu jak zakreślaczem. */
.tdesc-lead { position: relative; max-width: 50rem; padding: .15rem 0 .15rem 1.6rem; color: var(--ink); font-size: 1.25rem; line-height: 1.65; }
.tdesc-lead::before { content: ""; position: absolute; top: .3rem; bottom: .3rem; left: 0; width: 5px; border-radius: 999px; background: linear-gradient(var(--green), var(--lime)); transform-origin: top; }
.tdesc-lead strong { padding: 0 .12em; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--lime) 55%, transparent) 60%); }

/* Spis treści: białe pigułki z numerami, przyklejone przy przewijaniu; przeczytane sekcje mają ptaszek. */
.tdesc-toc { position: sticky; top: calc(var(--header-offset, 0px) + .5rem); z-index: 3; }
/* Pigułki zawsze zawijają się do kolejnych rzędów: przewijany w bok pasek chowałby część z nich za krawędzią,
   a nie widać, że trzeba go przesunąć. */
.tdesc-toc ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .25rem 0; list-style: none; }
.tdesc-toc li { flex: none; margin: 0; }
.tdesc-toc-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 650; white-space: nowrap; cursor: pointer; box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--green) 30%, transparent); transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.tdesc-toc-link:hover { border-color: var(--green); background: var(--mint); color: var(--green); }
/* Przeczytana sekcja: kolor ramki i tła, bez dodatkowego znaku. Znak zmieniałby szerokość pigułki, pasek zawijałby
   się inaczej, treść pod nim skakała, a podświetlenie przełączało w kółko między dwiema sekcjami. */
.tdesc-toc-link[data-done="true"] { border-color: color-mix(in srgb, var(--green) 35%, var(--line)); background: var(--mint); }
.tdesc-toc-link[aria-current="true"] { border-color: var(--green); background: var(--green); color: #fff; box-shadow: 0 10px 20px -12px var(--green); }
.tdesc-toc-num { color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.tdesc-toc-link[aria-current="true"] .tdesc-toc-num { color: color-mix(in srgb, var(--lime) 60%, #fff); }

/* Karta sekcji: ikona w kafelku, numer i tytuł; dużo miejsca w środku. */
.tdesc-card { position: relative; padding: 2.5rem 2.75rem; border: 1px solid var(--line); border-radius: var(--radius-xl, 26px); background: var(--surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--green) 4%, transparent), 0 22px 44px -34px color-mix(in srgb, var(--green) 50%, transparent); scroll-margin-top: calc(var(--header-offset, 0px) + 5.5rem); }
.tdesc-card-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.75rem; }
.tdesc-icon { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 18px; background: linear-gradient(145deg, var(--mint), color-mix(in srgb, var(--mint) 40%, var(--surface))); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 10%, transparent); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.tdesc-card:hover .tdesc-icon { transform: rotate(-6deg) scale(1.06); }
.tdesc-icon svg { width: 1.7rem; height: 1.7rem; stroke-width: 1.8; }
.tdesc-emoji { font-size: 1.75rem; line-height: 1; }
.tdesc-card-title { display: grid; gap: .2rem; min-width: 0; }
.tdesc-num { color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.tdesc-card-title h3 { margin: 0; color: var(--ink); font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; }
.tdesc-card-title h3:focus { outline: none; }
.tdesc-card-title h3:focus-visible { outline: 3px solid var(--focus-ring, var(--green)); outline-offset: 4px; border-radius: 4px; }
.tdesc-card-body > :not(:last-child) { margin-bottom: 1.25rem; }
.tdesc-card-body > :last-child { margin-bottom: 0; }
.tdesc-card-body > :first-child { margin-top: 0; }
.tdesc-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.75rem; }
.tdesc-card-actions p { margin: 0; }

/* Przyciski: do pytania i do pełnego składu; strzałka lekko odjeżdża po najechaniu. */
.tdesc-cta { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: 0 1.35rem; border: 1px solid var(--green); border-radius: 999px; background: var(--green); color: #fff; font-size: 1rem; font-weight: 800; cursor: pointer; box-shadow: 0 12px 24px -16px var(--green); transition: background-color .2s ease, box-shadow .2s ease; }
.tdesc-cta svg { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; transition: translate .2s ease; }
/* Hovered elements stay put; only what is inside them moves (styles.css: .icon-button:hover). */
.tdesc-cta:hover { box-shadow: 0 16px 28px -16px var(--green); }
.tdesc-cta:hover svg { translate: .2rem 0; }
.tdesc-cta:focus-visible { outline: 3px solid var(--focus-ring, var(--green)); outline-offset: 3px; }
.tdesc-cta--soft { border-color: color-mix(in srgb, var(--green) 25%, var(--line)); background: var(--mint); color: var(--green); box-shadow: none; }
.tdesc-cta--soft:hover { background: var(--surface); }
.tdesc-card-actions--parameters .tdesc-cta:hover svg { translate: 0 .2rem; }

/* Lista z ptaszkami (i z „!” w ważnych informacjach). */
.tdesc-list { display: grid; gap: .75rem; margin: 0 0 16px; padding: 0; list-style: none; }
.tdesc-list li { display: flex; align-items: flex-start; gap: .9rem; margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.tdesc-list-mark { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: .05rem; border-radius: 999px; background: var(--green); color: #fff; }
.tdesc-list-mark svg { width: 1rem; height: 1rem; stroke-width: 3; }
.tdesc-list--info .tdesc-list-mark { background: var(--mint); color: var(--green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent); }

/* Najważniejsze cechy: kafelki z ikonami; przy nieparzystej liczbie pierwszy jest szeroki i ciemny. */
.tdesc-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: 0 0 16px; padding: 0; list-style: none; }
.tdesc-tile { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 1.1rem; margin: 0; padding: 1.6rem 1.6rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, var(--surface) 35%, color-mix(in srgb, var(--mint) 75%, var(--surface))); transition: border-color .25s ease, box-shadow .25s ease; }
.tdesc-tile:hover { border-color: color-mix(in srgb, var(--green) 40%, var(--line)); box-shadow: 0 20px 36px -26px color-mix(in srgb, var(--green) 70%, transparent); }
.tdesc-tile-icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 15px; background: var(--green); color: color-mix(in srgb, var(--lime) 70%, #fff); box-shadow: 0 10px 18px -12px var(--green); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.tdesc-tile:hover .tdesc-tile-icon { transform: scale(1.08) rotate(-4deg); }
.tdesc-tile-icon svg { width: 1.5rem; height: 1.5rem; stroke-width: 2; }
.tdesc-tile-icon .tdesc-emoji { font-size: 1.5rem; }
.tdesc-tile-body { position: relative; z-index: 1; display: grid; gap: .25rem; min-width: 0; padding-right: 1.5rem; }
.tdesc-tile-title { color: var(--ink); font-size: 1.125rem; font-weight: 800; line-height: 1.3; }
.tdesc-tile-text { line-height: 1.55; }
.tdesc-tile-num { position: absolute; top: .5rem; right: .9rem; display: none; color: color-mix(in srgb, var(--green) 9%, transparent); font-size: 2.75rem; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.tdesc-tiles--odd > .tdesc-tile:first-child { border-color: transparent; background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--lime) 30%, transparent), transparent 60%), linear-gradient(135deg, var(--green), var(--green-2, var(--green))); color: #fff; }
.tdesc-tiles--odd > .tdesc-tile:first-child :is(.tdesc-tile-title, strong, a) { color: #fff; }
.tdesc-tiles--odd > .tdesc-tile:first-child .tdesc-tile-icon { background: var(--lime); color: var(--green); }
.tdesc-tiles--odd > .tdesc-tile:first-child .tdesc-tile-num { color: color-mix(in srgb, #fff 14%, transparent); }

/* Zastosowanie: kroki 1 → 2 → 3 ze strzałkami. */
.tdesc-steps { display: grid; gap: 1.5rem; margin: 0 0 16px; padding: 0; list-style: none; }
.tdesc-steps li { position: relative; display: flex; align-items: flex-start; gap: 1rem; margin: 0; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-soft); transition: background-color .25s ease; }
.tdesc-step-num { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--green); color: #fff; font-size: 1.125rem; font-weight: 900; box-shadow: 0 0 0 5px color-mix(in srgb, var(--lime) 30%, transparent); }
.tdesc-step-text { padding-top: .35rem; }
.tdesc-step-arrow { position: absolute; bottom: -.75rem; left: 50%; z-index: 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--green); color: #fff; box-shadow: 0 6px 14px -6px color-mix(in srgb, #000 45%, transparent); transform: translate(-50%, 50%) rotate(90deg); }
.tdesc-step-arrow svg { width: 1.1rem; height: 1.1rem; stroke-width: 2.4; }

/* Pierwsza sekcja zastosowania to ciemny pas w kolorze motywu: przerwa w rytmie jasnych kart. */
.tdesc-band { border-color: transparent; background: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--lime) 24%, transparent), transparent 55%), radial-gradient(80% 90% at 0% 100%, color-mix(in srgb, #000 22%, transparent), transparent 70%), var(--green); color: color-mix(in srgb, #fff 92%, var(--green)); box-shadow: 0 28px 50px -34px var(--green); }
.tdesc-band :is(.tdesc-card-title h3, h4, strong) { color: #fff; }
.tdesc-band a { color: #fff; }
.tdesc-band .tdesc-num { color: color-mix(in srgb, var(--lime) 55%, #fff); }
.tdesc-band .tdesc-icon { background: color-mix(in srgb, #fff 12%, transparent); color: color-mix(in srgb, var(--lime) 60%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent); }
.tdesc-band :is(.tdesc-list li, .tdesc-steps li) { border-color: color-mix(in srgb, #fff 16%, transparent); background: color-mix(in srgb, #fff 8%, transparent); }
.tdesc-band .tdesc-steps li:hover { background: color-mix(in srgb, #fff 13%, transparent); }
.tdesc-band :is(.tdesc-list-mark, .tdesc-step-num) { background: var(--lime); color: var(--green); }
.tdesc-band .tdesc-step-num { box-shadow: 0 0 0 5px color-mix(in srgb, var(--lime) 22%, transparent); }
.tdesc-band .tdesc-step-arrow { background: var(--surface); color: var(--green); }
.tdesc-band .tdesc-callout--tip { border-color: color-mix(in srgb, #fff 18%, transparent); background: color-mix(in srgb, #fff 10%, transparent); color: #fff; }
.tdesc-band .tdesc-callout--tip .tdesc-callout-icon { color: color-mix(in srgb, var(--lime) 60%, #fff); }
.tdesc-band .tdesc-callout--warn strong { color: var(--warning-strong); }
.tdesc-band :is(th, td) { border-color: color-mix(in srgb, #fff 18%, transparent); }
.tdesc-band thead th { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
.tdesc-band tbody tr:nth-child(even) { background: color-mix(in srgb, #fff 6%, transparent); }
.tdesc-band .tdesc-table--pairs tbody td:last-child { color: #fff; }
.tdesc-band :is(.tdesc-table-wrap, .tdesc-pairs) { border-color: color-mix(in srgb, #fff 18%, transparent); background: transparent; }
.tdesc-band .tdesc-pairs > div:nth-child(even) { background: color-mix(in srgb, #fff 6%, transparent); }
.tdesc-band .tdesc-pairs :is(dt, dd) { color: #fff; }

/* Ważne informacje: zwykła karta z „i” przy punktach, bez ostrzegawczych kolorów i wykrzykników: to wiedza
   o produkcie, nie jego wady. Także „Uwaga:” w tej sekcji jest spokojna. */
.tdesc-card--important .tdesc-callout--warn { border-color: color-mix(in srgb, var(--green) 18%, var(--line)); background: var(--surface-soft); color: var(--ink); }
.tdesc-card--important .tdesc-callout--warn :is(.tdesc-callout-icon, strong) { color: var(--green); }

/* Skład: karta w kropki, wartości jak na etykiecie i droga do pełnej tabeli. */
.tdesc-card--composition { background: radial-gradient(color-mix(in srgb, var(--green) 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--surface); }
.tdesc-pairs { display: grid; margin: 0 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-variant-numeric: tabular-nums; }
.tdesc-pairs > div { display: flex; align-items: baseline; gap: .75rem; padding: .7rem 1.1rem; }
.tdesc-pairs > div:nth-child(even) { background: var(--surface-soft); }
.tdesc-pairs dt { display: flex; flex: 1; align-items: baseline; gap: .75rem; min-width: 0; color: var(--ink); font-weight: 600; }
.tdesc-pairs dt::after { content: ""; flex: 1; min-width: 1.5rem; border-bottom: 2px dotted var(--line-strong); }
.tdesc-pairs dd { margin: 0; color: var(--green); font-weight: 800; white-space: nowrap; }

/* Ramki „Wskazówka” i „Uwaga”. */
.tdesc-callout { display: flex; align-items: flex-start; gap: .85rem; margin: 0 0 16px; padding: 1rem 1.15rem; border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line)); border-radius: 16px; background: var(--mint); color: var(--ink); }
.tdesc-callout p { margin: 0; }
.tdesc-callout-icon { flex: none; color: var(--green); }
.tdesc-callout-icon svg { width: 1.5rem; height: 1.5rem; }
.tdesc-callout--warn { border-color: #f1d9a6; background: var(--warning); color: var(--warning-ink); }
.tdesc-callout--warn :is(.tdesc-callout-icon, strong) { color: var(--warning-strong); }

/* Tabela; dwie kolumny (składnik | zawartość) to zestawienie z wartością po prawej. */
.tdesc-table-wrap { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
.tdesc-table-wrap table { margin: 0; }
.tdesc-table-wrap tbody tr:last-child > * { border-bottom: 0; }
.tdesc-table--pairs tbody td:first-child { color: var(--ink); font-weight: 600; }
.tdesc-table--pairs tbody td:last-child { color: var(--green); font-weight: 800; text-align: right; white-space: nowrap; }
.tdesc-table--pairs thead th:last-child { text-align: right; }

/* Najczęstsze pytania: rozwijane odpowiedzi, pierwsza otwarta; obok droga do „Zadaj pytanie”. */
.tdesc-faq { display: grid; gap: .8rem; }
.tdesc-faq-item { border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); overflow: hidden; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.tdesc-faq-item[open] { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); background: var(--surface); box-shadow: inset 4px 0 0 var(--lime), 0 14px 28px -24px color-mix(in srgb, var(--green) 70%, transparent); }
.tdesc-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .8rem 1.15rem; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.tdesc-faq-item summary::-webkit-details-marker { display: none; }
.tdesc-faq-item summary:hover { color: var(--green); }
.tdesc-faq-chevron { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: var(--mint); color: var(--green); transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.tdesc-faq-chevron svg { width: 1.1rem; height: 1.1rem; stroke-width: 2.4; }
.tdesc-faq-item[open] .tdesc-faq-chevron { transform: rotate(180deg); background: var(--green); color: #fff; }
.tdesc-faq-a { padding: 0 1.15rem 1.1rem; }
.tdesc-faq-a > :last-child { margin-bottom: 0; }
@supports selector(::details-content) {
  .tdesc-faq-item { interpolate-size: allow-keywords; }
  .tdesc-faq-item::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s ease allow-discrete; }
  .tdesc-faq-item[open]::details-content { height: auto; }
}
.tdesc-faq-more { display: grid; justify-items: start; gap: .75rem; padding: 1.1rem 1.2rem; border: 1px dashed color-mix(in srgb, var(--green) 30%, var(--line)); border-radius: 18px; background: var(--surface-soft); }

/* Między kartami (i przy „---” w treści): linia z rombem. */
.tdesc-sep { position: relative; width: min(24rem, 60%); height: 1px; margin: .25rem auto; background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--green) 50%, var(--line-strong) 80%, transparent); }
.tdesc-sep span { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border: 2px solid var(--green); background: var(--lime); transform: translate(-50%, -50%) rotate(45deg); }

/* Szerszy opis: kafelki w dwóch kolumnach, kroki w rzędzie ze strzałkami w bok, pytania obok tytułu. */
@container tdesc (min-width: 38rem) {
  .tdesc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdesc-tile-num { display: block; }
  .tdesc-tiles--odd > .tdesc-tile:first-child { grid-column: 1 / -1; align-items: center; padding: 1.6rem 1.75rem; }
  .tdesc-tiles--odd > .tdesc-tile:first-child .tdesc-tile-icon { width: 3.75rem; height: 3.75rem; border-radius: 18px; }
  .tdesc-tiles--odd > .tdesc-tile:first-child .tdesc-tile-title { font-size: 1.3125rem; }
}
@container tdesc (min-width: 46rem) {
  .tdesc-steps--flow { gap: 2.25rem; }
  .tdesc-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tdesc-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdesc-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tdesc-steps--flow li { flex-direction: column; gap: .85rem; padding: 1.35rem 1.25rem; }
  .tdesc-steps--flow .tdesc-step-text { padding-top: 0; }
  .tdesc-steps--flow .tdesc-step-arrow { top: 50%; right: -1.125rem; bottom: auto; left: auto; transform: translate(50%, -50%); }
  .tdesc-card--faq { display: grid; grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 2.25rem; align-items: start; }
  .tdesc-card--faq > .tdesc-card-head { flex-direction: column; align-items: flex-start; grid-column: 1; grid-row: 1; }
  .tdesc-card--faq > .tdesc-card-body { grid-column: 2; grid-row: 1 / span 2; }
  .tdesc-card--faq > .tdesc-faq-more { grid-column: 1; grid-row: 2; margin-top: 0; }
}

/* Ruch: treść widać od razu; karty i kafelki tylko lekko wjeżdżają, gdy pojawiają się na ekranie (przeglądarki
   z animacjami przewijania), a pasek wstępu raz rośnie. Bez ruchu dla „ogranicz animacje”. */
@media (prefers-reduced-motion: no-preference) {
  .tdesc-lead::before { animation: tdesc-grow .8s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (animation-timeline: view()) {
    .tdesc-card { animation: tdesc-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
    :is(.tdesc-tile, .tdesc-steps li) { animation: tdesc-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes tdesc-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes tdesc-rise { from { opacity: .55; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
@keyframes tdesc-pop { from { opacity: .6; scale: .96; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tdesc-tile, .tdesc-toc-link, .tdesc-faq-chevron, .tdesc-faq-item, .tdesc-icon, .tdesc-tile-icon, .tdesc-cta, .tdesc-cta svg, .tdesc-steps li { transition: none; }
  .tdesc-card:hover .tdesc-icon, .tdesc-tile:hover .tdesc-tile-icon { transform: none; }
}

@media (max-width: 680px) {
  .tdesc { gap: 1.75rem; }
  .tdesc .tdesc-title { font-size: 1.5rem; }
  .tdesc-lead { padding-left: 1.1rem; font-size: 1.125rem; }
  .tdesc-card { padding: 1.6rem 1.25rem; border-radius: 20px; }
  .tdesc-card-head { gap: .85rem; margin-bottom: 1.1rem; }
  .tdesc-icon { width: 2.9rem; height: 2.9rem; border-radius: 14px; }
  .tdesc-icon svg { width: 1.4rem; height: 1.4rem; }
  .tdesc-card-title h3 { font-size: 1.3125rem; }
  .tdesc-tile { padding: 1.1rem 1.1rem; }
}

@media (forced-colors: active) {
  .tdesc-card, .tdesc-tile, .tdesc-faq-item, .tdesc-callout, .tdesc-steps li, .tdesc-list li { border: 1px solid CanvasText; }
  .tdesc-toc-link[aria-current="true"] { border: 2px solid Highlight; }
}

@media print {
  .tdesc-toc, .tdesc-sep, .tdesc-card-actions, .tdesc-step-arrow { display: none; }
  .tdesc-card { box-shadow: none; break-inside: avoid; animation: none; }
  .tdesc-band { background: none; color: inherit; }
}