/* =========================================================================
   ta-favorites.css · Widok 04 · Ulubione
   Strona WordPress „Ulubione” z krótkim kodem [ta_ulubione] → szablon template-parts/ta-favorites.php
   Ładowanie: ta-fonts → ta-tokens → ta-product-card → ta-favorites
   Progi (szerokość .ta-fav): telefon < 700 · tablet 700-1199 · desktop ≥ 1200. Mobile-first.
   ========================================================================= */
.ta-fav {
  container: ta-fav / inline-size;
  width: 100%;
  font-family: var(--ta-font);
  color: var(--ta-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ta-fav *, .ta-fav *::before, .ta-fav *::after { box-sizing: border-box; }
.ta-fav p { margin: 0; }
.ta-fav svg { display: block; flex: none; }
.ta-fav [hidden] { display: none !important; } /* wyjątek: [hidden] musi wygrać z display:grid/flex sekcji */

/* A. Ścieżka */
.ta-fav .ta-fav__crumbs { background: var(--ta-cream); }
.ta-fav .ta-fav__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-fav .ta-fav__crumbs a { color: var(--ta-ink-muted); text-decoration: none; transition: color .2s ease; }
.ta-fav .ta-fav__crumbs a:hover { color: var(--ta-rust); }
.ta-fav .ta-fav__crumbs [aria-current] { color: var(--ta-ink); }

/* B. Nagłówek */
.ta-fav .ta-fav__head { display: flex; flex-direction: column; gap: 16px; padding: 18px 16px 0; }
.ta-fav .ta-fav__title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ta-fav .ta-fav__h1 { margin: 0; font: 300 30px/1.1 var(--ta-font); letter-spacing: 0; text-transform: none; color: var(--ta-ink); }
.ta-fav .ta-fav__count { font: 400 14px/1.5 var(--ta-font); color: var(--ta-ink-muted); }
.ta-fav .ta-fav__share {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; height: 44px; margin: 0; padding: 0 18px;
  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: .06em; text-transform: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ta-fav .ta-fav__share:hover { background: var(--ta-green); color: var(--ta-white); }

/* C. Siatka kart */
.ta-fav .ta-fav__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; padding: 20px 16px 56px; }

/* C2. Kafel „Dodaj kolejne wzory” (ostatni w siatce, tylko własna lista; cały kafel klikalny) */
.ta-fav .ta-fav__more {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 10px; border: 1px dashed var(--ta-dashed); border-radius: var(--ta-radius-md); text-align: center;
  transition: border-color .2s ease;
}
.ta-fav .ta-fav__more:hover { border-color: var(--ta-green-dark); }
.ta-fav .ta-fav__more-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--ta-green-dark); border-radius: 50%; color: var(--ta-green-dark); }
.ta-fav .ta-fav__more-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ta-fav .ta-fav__more-title { margin-top: 14px; font: 500 14px/1.35 var(--ta-font); color: var(--ta-ink); }
.ta-fav .ta-fav__more-text { max-width: 220px; margin-top: 8px; font: 400 12.5px/1.55 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }
.ta-fav .ta-fav__more-link {
  margin-top: 12px; font: 500 12.5px/1.5 var(--ta-font); color: var(--ta-green-dark); outline: none; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.ta-fav .ta-fav__more-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.ta-fav .ta-fav__more-link:focus-visible::after { outline: 2px solid var(--ta-green); outline-offset: -2px; }
/* strzałka jest częścią podkreślenia (jak w referencji), bez animacji */

/* D. Pusta lista */
.ta-fav .ta-fav__empty { padding: 20px 16px 56px; }
.ta-fav .ta-fav__empty-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px; border: 1px dashed var(--ta-border); border-radius: var(--ta-radius-md); text-align: center; }
.ta-fav .ta-fav__empty-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ta-white); color: var(--ta-rust); }
.ta-fav .ta-fav__empty-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ta-fav .ta-fav__empty-title { margin: 0; font: 300 24px/1.2 var(--ta-font); letter-spacing: 0; text-transform: none; color: var(--ta-ink); }
.ta-fav .ta-fav__empty-text { max-width: 420px; font: 400 14px/1.6 var(--ta-font); color: var(--ta-ink-muted); text-wrap: pretty; }
.ta-fav .ta-fav__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; }
.ta-fav .ta-fav__btn {
  display: flex; flex: 1 1 220px; align-items: center; justify-content: center; max-width: 300px; height: 48px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--ta-radius-sm); text-decoration: none; white-space: nowrap;
  font: 500 12.5px/1 var(--ta-font); letter-spacing: .08em; text-transform: uppercase;
  transition: background-color .25s ease, color .3s ease, background-size .45s var(--ta-ease);
}
.ta-fav .ta-fav__btn--primary { background: var(--ta-green); color: var(--ta-white); }
.ta-fav .ta-fav__btn--primary:hover { background: var(--ta-green-hover); color: var(--ta-white); }
.ta-fav .ta-fav__btn--line { border-color: var(--ta-green); background: transparent; color: var(--ta-green); }
.ta-fav .ta-fav__btn--line:hover { background: var(--ta-green); color: var(--ta-white); }
.ta-fav a:focus-visible, .ta-fav button:focus-visible { outline: 2px solid var(--ta-green); outline-offset: 2px; }

/* Tablet 700-1199 */
@container ta-fav (min-width: 700px) {
  .ta-fav .ta-fav__crumbs-in { padding: 14px 32px; }
  .ta-fav .ta-fav__head { padding: 18px 32px 0; }
  .ta-fav .ta-fav__h1 { font-size: 40px; }
  .ta-fav .ta-fav__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 20px 32px 72px; }
  .ta-fav .ta-fav__empty { padding: 20px 32px 72px; }
}

/* Desktop ≥ 1200 */
@container ta-fav (min-width: 1200px) {
  .ta-fav .ta-fav__crumbs-in { max-width: 1440px; margin: 0 auto; gap: 10px; padding: 20px 40px; font-size: 13px; }
  .ta-fav .ta-fav__sep { color: var(--ta-dashed); }
  .ta-fav .ta-fav__inner { max-width: 1440px; margin: 0 auto; }
  .ta-fav .ta-fav__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 40px 0; }
  .ta-fav .ta-fav__h1 { font-size: 44px; letter-spacing: -.01em; }
  .ta-fav .ta-fav__count { display: none; }
  .ta-fav[data-ta-fav-page="shared"] .ta-fav__count { display: inline; }
  .ta-fav .ta-fav__share { align-self: auto; padding: 0 20px; }
  .ta-fav .ta-fav__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 32px 40px 96px; }
  .ta-fav .ta-fav__empty { padding: 32px 40px 96px; }
  .ta-fav .ta-fav__more { padding: 24px; }
  .ta-fav .ta-fav__more-title { margin-top: 16px; font-size: 15px; line-height: 1.5; }
  .ta-fav .ta-fav__more-text { margin-top: 12px; font-size: 13.5px; }
  .ta-fav .ta-fav__more-link { font-size: 14px; }
  .ta-fav .ta-fav__empty-box { gap: 16px; padding: 64px 40px; border: 0; background: var(--ta-beige); }
  .ta-fav .ta-fav__empty-icon { width: 72px; height: 72px; }
  .ta-fav .ta-fav__empty-icon svg { width: 30px; height: 30px; stroke-width: 1.5; }
  .ta-fav .ta-fav__empty-title { font-size: 30px; line-height: 1.5; }
  .ta-fav .ta-fav__empty-text { max-width: 480px; font-size: 15px; }
  .ta-fav .ta-fav__empty-actions { gap: 12px; width: auto; margin-top: 8px; }
  .ta-fav .ta-fav__btn { flex: none; max-width: none; height: 50px; padding: 0 32px; font-size: 13px; letter-spacing: .12em; }
  .ta-fav .ta-fav__btn--primary { background: var(--ta-rust); }
  .ta-fav .ta-fav__btn--primary:hover { background: var(--ta-rust-hover); }
  .ta-fav .ta-fav__btn--line {
    padding: 0 30px; background-color: transparent;
    background-image: linear-gradient(var(--ta-green), var(--ta-green)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  }
  .ta-fav .ta-fav__btn--line:hover { background-color: transparent; background-size: 100% 100%; color: var(--ta-white); }
}
@media (prefers-reduced-motion: reduce) { .ta-fav * { transition: none !important; } }