/* birdmans-ui: bb-components.css. components.css (nagłówek archiwum, gatunki, paginacja, .tbd-note) + bird-card.css (karta ptaka i towaru)
   + components-2.css (plakietki, chipy, kafle gatunków i faktów, pauza, pusty stan, .tbd, liście w tle .bg-leaf). Kolejność jak w prototypach.
   Scalenie: .badge z bird-card.css i components-2.css jako jedna definicja (wynik kaskady bez zmian); .ico przeniesione do bb-core;
   .tbd z components-2 nie obejmuje nagłówka i stopki (tam .tbd to obrys linku). Wszystko pod :where(.bb). */

/* =================== components.css =================== */
/* Wspólne komponenty widoków (strona główna, archiwum bloga, archiwum sklepu). Tokeny z tokens.css.
   1. .ah       nagłówek archiwum: okruszki, H1, lead, opcjonalna notka z boku i jedna papuga na linii teal (jak w stopce)
   2. .sprow    gatunki: osiem ptaków na jednej grzędzie (linia teal), te same nazwy i ta sama kolejność wszędzie
   3. .pager/.pg paginacja (Previous/Next ze strzałką, bieżąca, wyłączona), jedna dla archiwum bloga i sklepu
   4. .tbd-note znacznik brakującej treści w prototypie (po angielsku, przerywany obrys)
   Karta ptaka jest w bird-card.css. Ten plik nie ustawia tła ani odstępów sekcji, które go zawierają. */
/* --- 1. nagłówek archiwum --- */
:where(.bb) .ah{--h:clamp(72px,6.4vw,96px);--f:.947;border-bottom:3px solid var(--teal);background:#fff}
:where(.bb) .ah__in{display:grid;grid-template-columns:minmax(0,1fr);padding-inline:var(--gutter)}
:where(.bb) .ah__text{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem)}
:where(.bb) .ah__text > .t-body{--flow:var(--s-3)}
:where(.bb) .ah__text > .t-h1{--flow:var(--s-2)}
:where(.bb) .ah__aside{padding-bottom:clamp(1.75rem,3vw,2.5rem)}
:where(.bb) .ah__aside[hidden]{display:none}
:where(.bb) .ah--aside .ah__text{padding-bottom:var(--s-5)}
:where(.bb) .ah__perch{display:none;align-self:end;justify-self:end;position:relative;z-index:1}
:where(.bb) .ah__perch img{display:block;height:var(--h);width:auto;margin-bottom:calc(var(--h) * (var(--f) - 1) - 4px);margin-right:calc(var(--h) * -.09)}
@media (min-width:768px){
  :where(.bb) .ah__in{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--gap);align-items:end}
  :where(.bb) .ah__text,:where(.bb) .ah__aside{grid-column:1}
  :where(.bb) .ah__perch{display:block;grid-column:2;grid-row:1 / span 2}
}
@media (min-width:1024px){
  :where(.bb) .ah--aside .ah__in{grid-template-columns:minmax(0,1fr) 21rem auto}
  :where(.bb) .ah--aside .ah__text{grid-column:1;grid-row:1;align-self:start;padding-bottom:clamp(1.75rem,3vw,2.5rem)}
  /* start: okruszki stoją tam, gdzie na innych stronach (odstęp daje .crumbs) */
  :where(.bb) .ah--aside .ah__aside{grid-column:2;grid-row:1;align-self:center;padding-block:clamp(1.5rem,3vw,2.5rem)}
  :where(.bb) .ah--aside .ah__perch{grid-column:3;grid-row:1}
}
:where(.bb) .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .6rem;margin:0 0 .25rem;padding:0;list-style:none;font-size:var(--fs-small);line-height:1.4}
:where(.bb) .crumbs li{display:flex;align-items:center;color:var(--ink-soft)}
:where(.bb) .crumbs li + li::before{content:"/";margin-right:.6rem;color:var(--ink-soft)}
:where(.bb) .crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--teal-text);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--dur-1) var(--ease)}
@media (hover:hover){
  :where(.bb) .crumbs a:hover{color:var(--teal-text);text-decoration-thickness:2px}
}
:where(.bb) .crumbs [aria-current]{color:var(--ink);font-weight:500}
:where(.bb) .crumbs + .t-h1{margin-top:.25rem}
/* Odstęp nad pierwszym okruszkiem należy do okruszków i jest jeden na wszystkich szablonach: 40 px na komputerze, 24 px na telefonie (płynnie).
   Hero, które zaczyna się okruszkami, ma nad nimi 0; lokalne wartości (about 16, post 24, bird 4, product 8 px) zniknęły. Reguła stoi tu, bo tu są okruszki (product.html nie podpina components-2.css). */
:where(.bb) .crumbs{--crumb-top:clamp(1.5rem,3vw,2.5rem);padding-top:var(--crumb-top)}
:where(.bb) .ah__text:has(> .crumbs:first-child){padding-top:0}
/* --- 2. gatunki: ptaki na jednej grzędzie, bez ramek; ikony z design/assets/icons/final --- */
:where(.bb) .sprow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(1.5rem,3vw,2rem) 0;margin:0;padding:0;list-style:none}
:where(.bb) .sprow__item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:var(--tap);border-radius:var(--r-card)}
:where(.bb) .sprow__icon{--h:clamp(84px,7vw,100px);--f:.947;position:relative;flex:none;display:flex;justify-content:center;align-items:flex-end;width:100%;min-height:calc(var(--h) * var(--f) - 1px);border-bottom:3px solid var(--teal)}
:where(.bb) .sprow__icon::before{content:"";position:absolute;left:50%;bottom:calc(var(--h) * .06);width:calc(var(--h) * .92);aspect-ratio:1;translate:-50% 0;border-radius:999px;background:var(--teal-light);opacity:0;transition:opacity var(--dur-2) var(--ease)}
:where(.bb) .sprow__icon img{position:relative;display:block;height:var(--h);width:auto;margin-bottom:calc(var(--h) * (var(--f) - 1) - 4px)}
:where(.bb) .sprow__body{padding:.9rem .5rem 0}
:where(.bb) .sprow__name{margin:0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-heading);text-wrap:balance;overflow-wrap:anywhere}
:where(.bb) .sprow__name a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 50% 100%/0 1px no-repeat;transition:color var(--dur-1) var(--ease),background-size var(--dur-3) var(--ease)}
:where(.bb) .sprow__name a::after{content:"";position:absolute;inset:0}
:where(.bb) .sprow__sub{margin:.1rem 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-soft)}
@media (hover:hover){
  :where(.bb) .sprow__item:hover .sprow__icon::before{opacity:1}
  :where(.bb) .sprow__item:hover .sprow__name a{color:var(--teal-text);background-size:100% 1px}
}
:where(.bb) .sprow__item:has(a:focus-visible){outline:2px solid var(--teal-text);outline-offset:3px}
:where(.bb) .sprow__item:has(a:focus-visible) .sprow__icon::before{opacity:1}
:where(.bb) .sprow__item:has(a:focus-visible) .sprow__name a{color:var(--teal-text);background-size:100% 1px}
:where(.bb) .sprow a:focus-visible{outline:none}
@media (max-width:1099px){
  :where(.bb) .sprow{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:480px){
  :where(.bb) .sprow{grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem .75rem}
  :where(.bb) .sprow__item{flex-direction:row;align-items:center;text-align:left;padding:.6rem 0;gap:.6rem}
  :where(.bb) .sprow__icon{width:44px;height:44px;min-height:0;align-items:center;border-bottom:0}
  :where(.bb) .sprow__icon::before{display:none}
  :where(.bb) .sprow__icon img{height:36px;margin:0}
  :where(.bb) .sprow__body{padding:0}
  :where(.bb) .sprow__sub{display:none}
}
/* --- 3. paginacja: jeden komponent dla archiwum bloga i sklepu; wyłączony krok ma przerywany obrys i --ink-soft --- */
:where(.bb) .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(.bb) .pager{margin-top:clamp(1.75rem,3vw,2.5rem)}
:where(.bb) .pager ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0;padding:0;list-style:none}
:where(.bb) .pg{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:var(--tap);min-height:var(--tap);padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink);font-size:1rem;font-weight:500;line-height:1.2;text-decoration:none;transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)}
:where(.bb) .pg .arr{display:inline-block;transition:transform var(--dur-2) var(--ease)}
:where(.bb) a.pg:focus-visible{border-color:var(--teal-text);color:var(--teal-text)}
@media (hover:hover){
  :where(.bb) a.pg:hover{border-color:var(--teal-text);color:var(--teal-text)}
  :where(.bb) a.pg[rel=next]:hover .arr{transform:translateX(3px)}
  :where(.bb) a.pg[rel=prev]:hover .arr{transform:translateX(-3px)}
}
:where(.bb) .pg[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
:where(.bb) .pg--off{color:var(--ink-soft);border-style:dashed;background:transparent}
:where(.bb) .pg--gap{min-width:0;border-color:transparent;background:transparent;color:var(--ink-soft);padding-inline:.25rem}
:where(.bb) .pg--step{padding-inline:1.1rem}
@media (max-width:639px){
  :where(.bb) .pager ul{gap:.375rem}
  :where(.bb) .pg--step .pg__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :where(.bb) .pg--step{padding-inline:0;width:var(--tap)}
}
/* --- 4. znacznik braku treści (prototyp) --- */
:where(.bb) .tbd-note{display:inline-block;margin:0;padding:.15rem .5rem;border:1px dashed rgba(44,41,82,.4);border-radius:var(--r-sm);font-size:var(--fs-micro);line-height:1.4;color:var(--ink-soft);background:rgba(255,255,255,.7)}
/* --- forced-colors (Windows, tryb wysokiego kontrastu; GAP-10): tła i cienie znikają, więc stan niosą obrys i kolory systemowe.
   Reguły działają tylko w tym trybie, zwykły wygląd bez zmian. --- */
@media (forced-colors:active){
  :where(.bb) :focus-visible{outline:2px solid Highlight;outline-offset:3px}
  :where(.bb) .pg[aria-current]{outline:2px solid Highlight;outline-offset:-4px;font-weight:700;text-decoration:underline}
  :where(.bb) .pg--off{color:GrayText;border-style:dashed}
  :where(.bb) .ah,:where(.bb) .sprow__icon{border-bottom-color:CanvasText}
  :where(.bb) .tbd-note{border-color:CanvasText}
}

/* =================== bird-card.css =================== */
/* Karta ptaka i towaru (jedna dla strony głównej i archiwum sklepu). Tokeny z tokens.css.
   Płaska w spoczynku; hover: obrys, cień i uniesienie o 2 px (zmienne --hover-* w tokens.css). Powiększenie zdjęcia w czasie --dur-3.
   Wariant ptaka: odznaka stanu, gatunek z ikoną, meta, "Pickup only", cena i "View details" w kolorze teal-text. */
:where(.bb) .card{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
:where(.bb) .card__media{position:relative;overflow:hidden;background:var(--surface)}
:where(.bb) .card--bird .card__media{aspect-ratio:4/5}
:where(.bb) .card--item .card__media{aspect-ratio:1/1}
:where(.bb) .card__media > img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;transition:transform var(--dur-3) var(--ease),filter var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease)}
:where(.bb) .card__media .nophoto{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1rem;text-align:center;color:var(--ink-soft);font-size:var(--fs-small)}
:where(.bb) .card__media .nophoto img{width:30%;max-width:96px;height:auto;opacity:.6}
:where(.bb) .card__media .nophoto svg{width:40px;height:40px;fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
:where(.bb) .is-off .card__media > img.ph{filter:grayscale(1);opacity:.5}
:where(.bb) .icon-btn{position:absolute;z-index:3;display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),opacity var(--dur-2) var(--ease)}
:where(.bb) .icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(.bb) .icon-btn.wish{top:.25rem;right:.25rem}
:where(.bb) .icon-btn.qv{right:.25rem;bottom:.25rem}
:where(.bb) .icon-btn.wish[aria-pressed="true"]{color:var(--teal-text)}
:where(.bb) .icon-btn.wish[aria-pressed="true"] svg{fill:var(--teal)}
@media (hover:hover){
  :where(.bb) .icon-btn:hover{background:var(--teal-light);color:var(--ink)}
  :where(.bb) .icon-btn.qv{opacity:0}
  :where(.bb) .card:hover .icon-btn.qv,:where(.bb) .card:focus-within .icon-btn.qv,:where(.bb) .icon-btn.qv:focus-visible{opacity:1}
}
:where(.bb) .card__body{display:flex;flex-direction:column;flex:1;padding:.875rem .875rem 1rem}
@media (min-width:760px){
  :where(.bb) .card__body{padding:1rem 1.125rem 1.125rem}
}
:where(.bb) .card__label{display:flex;align-items:center;gap:.5rem;min-height:28px;margin:0 0 .25rem;font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--teal-text)}
:where(.bb) .card__label img{width:28px;height:28px;object-fit:contain;flex:none}
:where(.bb) .card__name{margin:0;font-size:clamp(1rem,.95rem + .25vw,1.1875rem);line-height:1.3;font-weight:500;letter-spacing:-.005em;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
:where(.bb) .card__name a{color:inherit;text-decoration:none}
:where(.bb) .card__name a::after{content:"";position:absolute;inset:0;z-index:1}
:where(.bb) .card__name .alias{display:block;margin-top:.1rem;font-size:var(--fs-small);font-weight:400;color:var(--ink-soft)}
:where(.bb) .card__meta{margin:.375rem 0 0;font-size:var(--fs-small);line-height:1.45;color:var(--ink-soft)}
:where(.bb) .card__pickup{display:flex;align-items:center;gap:.4rem;margin:.375rem 0 0;font-size:var(--fs-micro);line-height:1.3;color:var(--ink-soft)}
:where(.bb) .card__pickup svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--teal-text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(.bb) .card__foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem;margin-top:auto;padding-top:.875rem}
:where(.bb) .card__price{margin:0;font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);font-weight:600;line-height:1.2;color:var(--ink)}
:where(.bb) .card__price.is-text{font-size:var(--fs-small);font-weight:600;color:var(--ink-soft)}
:where(.bb) .card__cta{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-small);font-weight:600;color:var(--teal-text);background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;padding-bottom:.15rem;transition:background-size var(--dur-3) var(--ease)}
:where(.bb) .card__cta .arr{display:inline-block;transition:transform var(--dur-2) var(--ease)}
@media (hover:hover){
  :where(.bb) .card:hover .card__media > img.ph{transform:scale(1.04)}
}
:where(.bb) .card:has(.card__name a:focus-visible){border-color:var(--teal-text);box-shadow:0 0 0 2px var(--teal-text)}
:where(.bb) .card:has(.card__name a:focus-visible) .card__cta{background-size:100% 1px}
:where(.bb) .card__name a:focus-visible{outline:0}
:where(.bb) .is-off .card__price{font-size:var(--fs-small);color:var(--ink-soft)}
/* ===== Doposażenie wizualne: akcent gatunku na karcie =====
   Włącza je klasa .card--accent razem z .sp-<nazwa> z accents.css (na tym samym elemencie .card). Bez .card--accent karta wygląda jak dotąd,
   więc strona główna się nie zmienia. Zmienne mają awaryjne wartości marki (teal), gdy accents.css nie jest załadowany.
   Zasady systemu (visual-system.md): kolor gatunku to akcent i tło, tekst zostaje granatowy; mały kolorowy tekst to --accent-ink (kontrast >= 5,2:1).
   Plakietka statusu przychodzi z components-2.css (.badge--available, --reserved, --sold); karta nie powtarza "Pickup only" (info o odbiorze jest raz w głowie strony). */
:where(.bb) .card--accent{--a:var(--accent,var(--teal));--a-ink:var(--accent-ink,var(--teal-text));--a-tint:var(--tint,#e2f3f1);--a-tint2:var(--tint-2,#d3eae8);/* drugi akcent (tylko gatunki achromatyczne, dziś African Grey): pasek i akcja; reszta gatunków bez zmian dzięki wartościom awaryjnym */--a-bar:var(--accent-2,var(--accent,var(--teal)));--a-cta:var(--accent-2-ink,var(--a-ink));--a-cta-tint:var(--accent-2-tint,var(--a-tint))}
:where(.bb) .card--accent .card__media{background:var(--a-tint)}
/* pasek akcentu u dołu zdjęcia: w spoczynku 22% szerokości, przy hoverze i fokusie rośnie do całości (jak w kafelku gatunku) */
:where(.bb) .card--accent .card__media::after{content:"";position:absolute;z-index:1;left:0;bottom:0;width:22%;height:4px;background:var(--a-bar);pointer-events:none;transition:width var(--dur-3) var(--ease)}
:where(.bb) .card--accent.is-off .card__media::after{background:#cfcdda}
/* plakietka Reserved: bird-card.css (starsza) dawała kropce pierścień, tu kropka z systemu jest pełna */
:where(.bb) .card--accent .badge--reserved::before{box-shadow:none}
/* etykieta gatunku: pigułka w tincie gatunku z ikoną; tekst --accent-ink */
:where(.bb) .card--accent .card__label{display:inline-flex;align-self:flex-start;max-width:100%;gap:.5rem;min-height:2rem;margin:0 0 .5rem;padding:.1rem .85rem .1rem .25rem;border-radius:var(--r-pill);background:var(--a-tint);border:1px solid color-mix(in srgb,var(--a) 40%,transparent);color:var(--a-ink);font-size:var(--fs-small);line-height:1.25;transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
:where(.bb) .card--accent .card__label img{width:1.75rem;height:1.75rem;transition:transform var(--dur-3) var(--ease)}
:where(.bb) .card--accent .card__label .ico{width:1.25rem;height:1.25rem;margin-left:.45rem;--ico-sw:2.1}
:where(.bb) .card--accent .card__label .ico + span{margin-left:-.1rem}
/* cechy jako małe chipy (białe, obrys w kolorze gatunku); tekst granatowy */
:where(.bb) .card__tags{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 0;padding:0;list-style:none}
:where(.bb) .card__tags li{display:inline-flex;align-items:center;min-height:1.625rem;padding:0 .6rem;border-radius:var(--r-pill);background:#fff;border:1px solid color-mix(in srgb,var(--a,var(--teal)) 45%,transparent);color:var(--ink);font-size:var(--fs-micro);font-weight:500;line-height:1.2;white-space:nowrap}
:where(.bb) .card--accent .card__name .alias{color:var(--ink-soft)}
/* serce i oko: widoczne kółko 34 px, pole dotyku 44 px (przycisk jest przezroczysty) */
:where(.bb) .card--accent .icon-btn{background:transparent;box-shadow:none}
:where(.bb) .card--accent .icon-btn::before{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 1px var(--line),0 1px 3px rgba(44,41,82,.18);transition:background-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
:where(.bb) .card--accent .icon-btn svg{position:relative}
:where(.bb) .card--accent .icon-btn.wish[aria-pressed="true"]{color:var(--a-ink)}
:where(.bb) .card--accent .icon-btn.wish[aria-pressed="true"] svg g{fill:var(--a)}
:where(.bb) .card--accent .icon-btn.wish[aria-pressed="true"]::before{background:var(--a-tint);box-shadow:0 0 0 1px color-mix(in srgb,var(--a) 55%,transparent),0 1px 3px rgba(44,41,82,.18)}
@keyframes bb-heart-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
:where(.bb) .card--accent .icon-btn.wish.is-pop svg{animation:bb-heart-pop var(--dur-2) var(--ease)}
:where(.bb) .card--accent .icon-btn:focus-visible::before{box-shadow:0 0 0 2px var(--a-ink)}
/* CTA: tekst w --accent-ink, strzałka w kółku, które przy hoverze wypełnia się akcentem */
:where(.bb) .card--accent .card__cta{color:var(--a-cta)}
:where(.bb) .card--accent .card__cta .arr{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--a-cta-tint);color:var(--a-cta);transform:none;transition:background-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
:where(.bb) .card--accent .card__cta .arr .ico{width:1rem;height:1rem;--ico-sw:2.6;transition:transform var(--dur-2) var(--ease)}
:where(.bb) .card--accent .card__foot{border-top:1px dashed color-mix(in srgb,var(--a) 35%,transparent);margin-top:auto;padding-top:.75rem;align-items:center}
:where(.bb) .card--accent .card__body{padding-bottom:.875rem}
/* brak zdjęcia: tło tint do tint-2 (jeden kierunek), ikona gatunku stoi na linii teal, towar ma kafelek z aparatem */
:where(.bb) .card--accent .card__media.is-nophoto{background:linear-gradient(180deg,var(--a-tint) 0,var(--a-tint2) 100%)}
:where(.bb) .card__media .nophoto .empty__perch{--h:clamp(72px,18vw,112px);width:min(72%,11rem);margin-bottom:0}
:where(.bb) .card__media .nophoto .empty__art{width:auto;max-width:none;height:var(--h);opacity:1}
:where(.bb) .nophoto__tile{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:var(--r-card);background:#fff;border:1px solid color-mix(in srgb,var(--a,var(--teal)) 35%,transparent);color:var(--a-ink,var(--teal-text))}
:where(.bb) .card__media .nophoto .nophoto__tile .ico{width:1.75rem;height:1.75rem;--ico-sw:1.5}
@media (hover:hover){
  :where(.bb) .card--accent .icon-btn:hover::before{background:var(--a-tint)}
  :where(.bb) .card--accent .icon-btn:hover{background:transparent}
}
:where(.bb) .card--accent:has(.card__name a:focus-visible){border-color:var(--a-ink);box-shadow:0 0 0 2px var(--a-ink)}
:where(.bb) .card--accent:has(.card__name a:focus-visible) .card__media::after{width:100%}
:where(.bb) .card--accent:has(.card__name a:focus-visible) .card__cta .arr{background:var(--a-cta);color:#fff}
:where(.bb) .card--accent:has(.card__name a:focus-visible) .card__cta .arr .ico{transform:translateX(2px)}
:where(.bb) .card--accent:has(.card__name a:focus-visible) .card__label img{transform:translateY(-2px) rotate(-6deg)}
@media (max-width:639px){
  :where(.bb) .card--accent .card__label{font-size:var(--fs-micro);padding-right:.65rem;gap:.4rem}
  :where(.bb) .card--accent .card__label img{width:1.625rem;height:1.625rem}
  :where(.bb) .card--accent .card__foot{gap:.25rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  :where(.bb) .card--accent .icon-btn.wish.is-pop svg{animation:none}
}
:where(.bb) .card--accent .card__label--txt{padding-left:.85rem}
:where(.bb) .card--accent .card__name:has(+ .card__foot){margin-bottom:.75rem}
/* --- forced-colors (Windows, tryb wysokiego kontrastu; GAP-10): pasek akcentu i plakietka dostają kolory systemowe; zwykły wygląd bez zmian --- */
@media (forced-colors:active){
  :where(.bb) .card--accent .card__media::after{forced-color-adjust:none;background:Highlight}
  :where(.bb) .card .badge{border:1px solid CanvasText}
  :where(.bb) .card__name a:focus-visible::after{outline:2px solid Highlight;outline-offset:2px}
}

/* =================== components-2.css =================== */
/* Birdman's Parrots: elementy wspólne systemu wizualnego (wersja 1, status: proposed).
   Wymaga: tokens.css i accents.css (zmienne --accent, --tint, --tint-2, --accent-ink z klas .sp-<nazwa>; bez klasy: teal marki).
   1. .ico      ikona interfejsu z ui-icons.svg (rozmiary 20, 24, 28, 32; kreska zawsze 1,75 px)
   2. .badge    plakietka statusu: Available, Reserved, Sold, Pickup only (jeden styl, cztery kolory)
   3. .chip     chip filtra (przycisk przełączany aria-pressed), opcjonalnie z kropką albo ikoną gatunku
   4. .sptile   kafel gatunku: ikona, nazwa, opis, link rozciągnięty na cały kafel
   5. .fact     kafel faktu: ikona interfejsu, etykieta, wartość (dl)
   6. .pause    pauza ilustracyjna: jedna ikona papugi na linii teal (jak w stopce)
   7. .empty    pusty stan z ikoną gatunku
   8. .tbd      widoczny znacznik brakującej informacji
   Ruch tylko w (hover:hover) i dla :focus-visible; prefers-reduced-motion zeruje czasy w tokens.css. Cele dotyku min. 44 px. */
/* --- 1. ikony interfejsu: przeniesione do bb-core.css --- */
/* --- 2. plakietka statusu --- */
/* scalone z bird-card.css: pozycja na zdjęciu karty (reszta wyglądu z systemu) */
:where(.bb) .badge{position:absolute;z-index:2;top:.625rem;left:.625rem;--b-bg:#e3f5f3;--b-line:#a8dcd8;--b-fg:#0d5651;--b-dot:#39b8b2;display:inline-flex;align-items:center;gap:.5rem;min-height:1.75rem;padding:.15rem .8rem .15rem .65rem;border-radius:var(--r-pill);border:1px solid var(--b-line);background:var(--b-bg);color:var(--b-fg);font-size:var(--fs-micro);font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 1px 2px rgba(44,41,82,.08)}
:where(.bb) .badge::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--b-dot)}
:where(.bb) .badge--static{position:static}
/* z bird-card.css: pierścień kropki Reserved (tło kropki nadpisuje system) */
:where(.bb) .badge--reserved::before{box-shadow:inset 0 0 0 2px var(--ink)}
:where(.bb) .badge--available{--b-bg:#e3f5f3;--b-line:#a8dcd8;--b-fg:#0d5651;--b-dot:#39b8b2}
/* 7,55:1 */
:where(.bb) .badge--reserved{--b-bg:#fff1cf;--b-line:#f0cf80;--b-fg:#6b4300;--b-dot:#e8a317}
/* 7,72:1 */
:where(.bb) .badge--sold{--b-bg:#ecebf0;--b-line:#cfcdda;--b-fg:#4a4766;--b-dot:#8c89a4}
/* 7,43:1 */
:where(.bb) .badge--sold::before{background:transparent;box-shadow:inset 0 0 0 2px var(--b-dot)}
/* pusta kropka: status nie opiera się tylko na kolorze */
:where(.bb) .badge--pickup{--b-bg:#e6effa;--b-line:#b4cce9;--b-fg:#1d4670;--b-dot:#3a78c2}
/* 8,37:1 */
:where(.bb) .badge--pickup::before{border-radius:2px}
/* kwadratowa kropka: też nie tylko kolor */
/* plakietka na zdjęciu: pełne tło jest już domyślne, dodajemy mocniejszy cień */
:where(.bb) .badge--photo{box-shadow:0 2px 6px rgba(44,41,82,.22)}
/* --- 3. chip filtra --- */
:where(.bb) .chip{--chip-line:#777494;display:inline-flex;align-items:center;gap:.5rem;min-height:var(--tap);padding:.35rem 1rem;border-radius:var(--r-pill);border:1px solid var(--chip-line);background:#fff;color:var(--ink);font-family:inherit;font-size:var(--fs-small);font-weight:500;line-height:1.3;cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
:where(.bb) .chip__dot{flex:none;width:.625rem;height:.625rem;border-radius:50%;background:var(--accent)}
:where(.bb) .chip__art{flex:none;width:1.75rem;height:1.75rem;margin-left:-.35rem;object-fit:contain}
:where(.bb) .chip__art ~ .chip__check{display:none!important}
/* chip z ikoną gatunku: stan zaznaczenia pokazuje wypełnienie, bez znaczka obok ptaka */
:where(.bb) .chip__check{display:none;flex:none}
:where(.bb) .chip[aria-pressed="true"]{background:var(--chip-on,var(--ink));border-color:var(--chip-on,var(--ink));color:#fff}
:where(.bb) .chip[aria-pressed="true"] .chip__check{display:inline-block}
:where(.bb) .chip[aria-pressed="true"] .chip__dot{display:none}
:where(.bb) .chip--sp{--chip-on:var(--accent-ink)}
@media (hover:hover){
  :where(.bb) .chip:hover{border-color:var(--teal-text);background:var(--band-mist,#f1f9f8);box-shadow:0 0 0 1px var(--teal-text) inset}
  :where(.bb) .chip[aria-pressed="true"]:hover{background:var(--chip-on,var(--ink));filter:brightness(1.12);box-shadow:none}
  :where(.bb) .chip--sp:hover{border-color:var(--accent-ink);background:var(--tint);box-shadow:0 0 0 1px var(--accent-ink) inset}
}
:where(.bb) .chip:focus-visible{outline:2px solid var(--teal-text);outline-offset:3px;border-radius:var(--r-pill)}
:where(.bb) .chip[disabled]{opacity:1;color:var(--ink-soft);border-style:dashed;background:transparent;cursor:not-allowed}
:where(.bb) .chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
:where(.bb) .chips--scroll{flex-wrap:nowrap;overflow-x:auto;padding:3px 3px var(--s-2);margin-inline:-3px;scrollbar-width:thin}
:where(.bb) .chips--scroll .chip{flex:none}
/* --- 4. kafel gatunku (link rozciągnięty; tło tint, akcent w kresce u dołu) --- */
:where(.bb) .sptile{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name name" "desc art" "go art";grid-template-rows:auto auto 1fr;align-content:start;column-gap:var(--s-4);padding:var(--s-5) var(--s-5) var(--s-6);border-radius:var(--r-card);background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease),border-color var(--dur-2) var(--ease)}
:where(.bb) .sptile::after{content:"";position:absolute;left:var(--s-5);right:var(--s-5);bottom:-1px;height:4px;border-radius:4px 4px 0 0;background:var(--accent);transform:scaleX(.16);transform-origin:left;transition:transform var(--dur-3) var(--ease)}
:where(.bb) .sptile__art{grid-area:art;align-self:end;justify-self:end;width:clamp(88px,8vw,112px);height:auto;aspect-ratio:1;object-fit:contain;margin:calc(var(--s-3) * -1) calc(var(--s-2) * -1) calc(var(--s-4) * -1) 0;transition:transform var(--dur-3) var(--ease)}
:where(.bb) .sptile__name{grid-area:name;margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-heading);letter-spacing:-.005em;color:var(--ink);text-wrap:balance;overflow-wrap:anywhere}
:where(.bb) .sptile__link{color:inherit;text-decoration:none;background:linear-gradient(var(--accent-ink),var(--accent-ink)) 0 100%/0 2px no-repeat;padding-bottom:2px;transition:background-size var(--dur-3) var(--ease)}
:where(.bb) .sptile__link::before{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
:where(.bb) .sptile__link:focus-visible{outline:none}
:where(.bb) .sptile__link:focus-visible::before{outline:2px solid var(--accent-ink);outline-offset:3px}
:where(.bb) .sptile__desc{grid-area:desc;margin:var(--s-1) 0 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-soft)}
:where(.bb) .sptile__go{grid-area:go;align-self:end;display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--s-3);font-size:var(--fs-small);font-weight:600;line-height:1.3;color:var(--accent-ink)}
:where(.bb) .sptile__go .ico{transition:transform var(--dur-2) var(--ease)}
@media (hover:hover){
  :where(.bb) .sptile:hover::after{transform:scaleX(1)}
}
:where(.bb) .sptile:has(.sptile__link:focus-visible){border-color:color-mix(in srgb,var(--accent) 70%,transparent)}
:where(.bb) .sptile:has(.sptile__link:focus-visible)::after{transform:scaleX(1)}
:where(.bb) .sptile:has(.sptile__link:focus-visible) .sptile__art{transform:translateY(-4px) rotate(-2deg)}
:where(.bb) .sptile:has(.sptile__link:focus-visible) .sptile__link{background-size:100% 2px}
:where(.bb) .sptile:has(.sptile__link:focus-visible) .sptile__go .ico{transform:translateX(3px)}
:where(.bb) .sptile--no-art{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "desc" "go"}
:where(.bb) .sptiles > li{display:grid}
:where(.bb) .sptiles > li > .sptile{height:100%}
:where(.bb) .sptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));gap:var(--s-4);margin:0;padding:0;list-style:none}
/* --- 5. kafel faktu: dl, ikona w tintowanym polu, etykieta teal-text, wartość ink --- */
:where(.bb) .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr));gap:var(--s-5) var(--gap);margin:0;padding:0}
:where(.bb) .fact{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--s-4);align-items:start;min-width:0}
:where(.bb) .fact__ico{grid-row:1 / span 2;display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--r-card);background:var(--tint);color:var(--accent-ink)}
:where(.bb) .fact__label{margin:0;padding-top:.15rem;font-size:var(--fs-small);line-height:var(--lh-label);font-weight:var(--fw-label);color:var(--accent-ink)}
:where(.bb) .fact__value{margin:.1rem 0 0;font-size:var(--fs-body);line-height:1.4;font-weight:500;color:var(--ink);overflow-wrap:anywhere;text-wrap:pretty}
:where(.bb) .fact__value a{position:relative;color:inherit;text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color var(--dur-1) var(--ease),text-decoration-thickness var(--dur-1) var(--ease)}
/* pole dotyku min. 44 px bez zmiany układu: niewidoczny obszar kliknięcia */
:where(.bb) .fact__value a::after{content:"";position:absolute;inset:-.8125rem -.25rem}
@media (hover:hover){
  :where(.bb) .fact__value a:hover{color:var(--accent-ink);text-decoration-thickness:2px}
}
:where(.bb) .fact__value a:focus-visible{color:var(--accent-ink);text-decoration-thickness:2px}
:where(.bb) .fact__note{display:block;margin-top:.1rem;font-size:var(--fs-small);line-height:var(--lh-small);font-weight:400;color:var(--ink-soft)}
/* wariant z kartą (na tle mgły lub ecru): biała karta z obrysem */
:where(.bb) .fact--card{padding:var(--s-4) var(--s-5);border-radius:var(--r-card);background:#fff;border:1px solid var(--line)}
/* wariant pionowy dla wąskich kolumn */
:where(.bb) .fact--stack{grid-template-columns:minmax(0,1fr);row-gap:var(--s-3)}
:where(.bb) .fact--stack .fact__ico{grid-row:auto}
/* --- 6. pauza ilustracyjna: jedna papuga stoi łapami na linii teal 3 px (jak w stopce i w nagłówkach archiwów) ---
   Wysokość ikony --h; --perch-f i --perch-r pochodzą z klasy .sp-<nazwa> na .pause (stopy na linii, ogon przy osi treści).
   Tło: przezroczyste (bierze kolor sekcji). Tekst z lewej jest opcjonalny. */
:where(.bb) .pause{--h:clamp(76px,7.4vw,108px);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);padding-inline:var(--gutter);padding-top:var(--s-5);border-bottom:3px solid var(--teal)}
:where(.bb) .pause__text{flex:1 1 auto;min-width:0;max-width:34rem;padding-bottom:var(--s-4);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);text-wrap:pretty}
:where(.bb) .pause__text b{font-weight:500}
:where(.bb) .pause__art{flex:none;display:block;height:var(--h);width:auto;margin-bottom:calc(var(--h) * (var(--perch-f) - 1) - 4px);margin-right:calc(var(--h) * var(--perch-r) * -1)}
:where(.bb) .pause--left{flex-direction:row-reverse;justify-content:flex-end}
:where(.bb) .pause--left .pause__art{margin-right:0;margin-left:calc(var(--h) * var(--perch-r) * -1)}
@media (max-width:640px){
  :where(.bb) .pause{--h:84px}
  :where(.bb) .pause__text{padding-bottom:var(--s-3)}
}
/* --- 7. pusty stan: ikona gatunku na krótkiej linii, komunikat, jedna akcja --- */
:where(.bb) .empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s-7) var(--gutter)}
:where(.bb) .empty__perch{--h:clamp(96px,9vw,128px);display:flex;justify-content:center;width:min(100%,12rem);border-bottom:3px solid var(--teal);margin-bottom:var(--s-5)}
:where(.bb) .empty__art{display:block;height:var(--h);width:auto;margin-bottom:calc(var(--h) * (var(--perch-f) - 1) - 4px)}
:where(.bb) .empty__title{margin:0;max-width:30ch;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-heading);color:var(--ink);text-wrap:balance}
:where(.bb) .empty__text{margin:var(--s-2) 0 0;max-width:46ch;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-soft);text-wrap:pretty}
:where(.bb) .empty .actions{justify-content:center;margin-top:var(--s-5)}
:where(.bb) .empty--box{border-radius:var(--r-lg);background:var(--tint)}
/* --- 8. znacznik braku danych: zawsze widoczny, nie wchodzi na produkcję --- */
:where(.bb) .tbd:where(:not(.bp-header *,.bp-footer *)){display:inline;padding:0 .4em;border:1px dashed var(--ink-soft);border-radius:var(--r-sm);background:#fff;color:var(--ink-soft);font-size:var(--fs-micro);font-weight:500;white-space:normal;overflow-wrap:anywhere}
/* --- forced-colors (Windows, tryb wysokiego kontrastu; GAP-10): wypełnienia znikają, więc kropki statusu, zaznaczony chip i paski akcentu
   dostają kolory systemowe i obrys. Reguły działają tylko w tym trybie, zwykły wygląd bez zmian. --- */
@media (forced-colors:active){
  :where(.bb) .badge{border:1px solid CanvasText}
  :where(.bb) .badge::before,:where(.bb) .chip__dot{forced-color-adjust:none;background:CanvasText}
  :where(.bb) .badge--sold::before{background:Canvas;border:2px solid CanvasText;box-shadow:none}
  /* pusta kropka zostaje: status nie opiera się tylko na kolorze */
  :where(.bb) .badge--pickup::before{border-radius:2px}
  :where(.bb) .chip{border:1px solid ButtonText}
  :where(.bb) .chip[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:-4px;font-weight:700}
  :where(.bb) .chip[disabled]{color:GrayText;border-style:dashed}
  :where(.bb) .sptile{border:1px solid CanvasText}
  :where(.bb) .sptile::after{forced-color-adjust:none;background:Highlight}
  :where(.bb) .sptile__link:focus-visible::before{outline:2px solid Highlight}
}
/* wspólna klasa: link jako samodzielny wiersz z celem dotykowym (z recenzji 2026-10-29: about, contact, legal) */
:where(.bb) .t-link--solo{display:inline-flex;align-items:center;min-height:var(--tap,44px)}
/* --- 9. liście w tle sekcji .bg-leaf (z components-2.css; korekta właściciela 2026-10-31: liście to ozdobnik tła, nie obraz) ---
   Cicha, jednobarwna warstwa tła pasma pod treścią. Nigdy obraz karty, pole zdjęcia, kolumna papugi w nagłówku ani ilustracja w treści;
   nigdy w kolumnie tekstu. Obrazy: design/assets/leaves/leaf-{monstera,palm,banana,branch,heliconia,fern}-quiet-{mist,warm,sage}-{640,1200}.webp
   (srcset 640w, 1200w), zawsze width i height, alt="" i aria-hidden="true", loading="lazy". Ton jak pasmo: mist na mgle, warm na ecru, sage na bieli.
   Sekcja nośna dostaje .has-bg-leaf (isolation, overflow clip), liść jest jej pierwszym dzieckiem z z-index:-1 (nad tłem, pod treścią).
   Pozycje --tl/--tr/--bl/--br/--ml/--mr (boki na wysokości --bg-leaf-y, domyślnie 50%), rozmiary --s/--l, --flip; --bg-leaf-out część szerokości poza krawędzią.
   1 do 2 liści na sekcję, nie w każdej sekcji; na telefonie mniejsze, --desk ukrywa. Kontrast tekstu nad liściem od 5,0:1. */
:where(.bb) .has-bg-leaf{position:relative;isolation:isolate;overflow:clip}
:where(.bb) .bg-leaf{--bg-leaf-w:clamp(260px,26vw,380px);--bg-leaf-w-m:170px;--bg-leaf-out:.34;position:absolute;z-index:-1;display:block;width:var(--bg-leaf-w);max-width:none;height:auto;pointer-events:none;user-select:none}
:where(.bb) .bg-leaf--s{--bg-leaf-w:clamp(200px,18vw,270px);--bg-leaf-w-m:130px}
:where(.bb) .bg-leaf--l{--bg-leaf-w:clamp(320px,32vw,480px);--bg-leaf-w-m:200px}
:where(.bb) :is(.bg-leaf--tl,.bg-leaf--tr){top:calc(var(--bg-leaf-w) * var(--bg-leaf-out) * -1)}
:where(.bb) :is(.bg-leaf--bl,.bg-leaf--br){bottom:calc(var(--bg-leaf-w) * var(--bg-leaf-out) * -1)}
:where(.bb) :is(.bg-leaf--ml,.bg-leaf--mr){top:var(--bg-leaf-y,50%);translate:0 -50%}
:where(.bb) :is(.bg-leaf--tl,.bg-leaf--bl,.bg-leaf--ml){left:calc(var(--bg-leaf-w) * var(--bg-leaf-out) * -1)}
:where(.bb) :is(.bg-leaf--tr,.bg-leaf--br,.bg-leaf--mr){right:calc(var(--bg-leaf-w) * var(--bg-leaf-out) * -1)}
:where(.bb) .bg-leaf--flip{scale:-1 1}
@media (max-width:767.98px){
  :where(.bb) .bg-leaf{--bg-leaf-w:var(--bg-leaf-w-m);--bg-leaf-out:.45}
  :where(.bb) .bg-leaf--desk{display:none}
}
@media (forced-colors:active),print{:where(.bb) .bg-leaf{display:none}}

/* 0.3.2: formularze Fluent Forms w kolorach systemu (przycisk główny, pola, fokus) */
:where(.bb) .fluentform .ff-btn-submit{min-height:var(--tap);padding:.65rem 1.4rem!important;border:0!important;border-radius:var(--r-pill)!important;background:var(--teal)!important;color:var(--ink)!important;font-weight:var(--fw-button)!important;font-size:1rem!important;transition:background-color var(--dur-1) var(--ease)}
:where(.bb) .fluentform .ff-btn-submit:hover{background:var(--teal-light)!important;opacity:1!important}
:where(.bb) .fluentform .ff-el-form-control{min-height:var(--tap);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:1rem}
:where(.bb) .fluentform .ff-el-form-control:focus{border-color:var(--teal-text);outline:2px solid var(--teal-text);outline-offset:1px;box-shadow:none}
:where(.bb) .fluentform .ff-el-input--label label{color:var(--ink);font-weight:600}