/**
 * agentsclub V2 - /sklep, katalog produktów.
 *
 * Siatka, a nie lista jak /zadania: kafelki sklepu porównuje się ze sobą, więc
 * mają być obok siebie i tej samej wysokości. Zadania czyta się po kolei,
 * dlatego tam jedna kolumna pełnej szerokości - to nie jest niespójność, tylko
 * inna czynność.
 *
 * Wymaga tokens.css + base.css + layout.css (topbar, .wrap, .head).
 */

/* Nagłówek strony. Skopiowany z home.css, nie zaciągnięty przez doładowanie
   tamtego arkusza - to konwencja V2: jedna trasa, jeden plik CSS, a wspólne
   idiomy się przepisuje. Bez tego .head i .lead nie mają żadnych reguł i
   tytuł siada tuż pod paskiem. */
.head { padding: 56px 0 8px; }
.head h1 { font-size: var(--fs-h); font-weight: 650; letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.head .lead {
  font-size: 16px;
  color: var(--sub);
  line-height: 1.55;
  max-width: 64ch;
  margin: 10px 0 28px;
  text-wrap: pretty;
}

/* Siatka z #99 §7: kafel co najmniej 288px, odstęp 14px i NAJWYŻEJ TRZY obok
   siebie. Sam `auto-fill` z 288px dałby cztery kolumny na bloku szerszym niż
   1194px; dolna granica `(100% - 2 odstępy) / 3` sprawia, że czwarta nie
   mieści się nigdy, niezależnie od szerokości. */
.sh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(288px, calc((100% - 28px) / 3)), 1fr));
  gap: 14px;
  padding-bottom: 72px;
}

/* Jedno białe płótno (#99 §0): kafel odcina włos, nie zmiana tła. */
.sh-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color .2s ease-out;
}

/* ── okładka ────────────────────────────────────────────── */

.sh-cover-link { display: block; }
.sh-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--ph);
}
.sh-cover-blank { background: var(--ph); }

/* Posiadany produkt traci nasycenie okładki, ale NIE traci czytelności
   tekstu - dokładnie jak zamknięte zadanie w tasks.css, tylko w drugą
   stronę. Przygaszamy to, co sprzedaje, bo sprzedawać już nie trzeba. */
.sh-card.is-owned .sh-cover { opacity: .55; filter: saturate(.5); }

/* ── treść ──────────────────────────────────────────────── */

.sh-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sh-owned {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--acc);
  margin-bottom: 10px;
}
.sh-owned svg { width: 15px; height: 15px; flex: none; }

.sh-body h2 { font-size: 19px; font-weight: 650; letter-spacing: -.012em; line-height: 1.3; text-wrap: balance; }
.sh-body h2 a { color: inherit; text-decoration: none; }
@media (hover: hover) { .sh-body h2 a:hover { text-decoration: underline; text-underline-offset: 3px; } }

.sh-lead {
  font-size: var(--fs-small);
  color: var(--sub);
  line-height: 1.55;
  margin-top: 8px;
  text-wrap: pretty;
}

.sh-items { list-style: none; margin: 16px 0 0; display: flex; flex-direction: column; gap: 7px; }
.sh-items li { font-size: var(--fs-small); color: var(--ink); }
.sh-kind {
  font-size: 12px;
  font-weight: 700;
  color: var(--sub);
  margin-right: 7px;
}

/* ── stopka kafelka ─────────────────────────────────────── */

/* margin-top:auto zamiast stałego odstępu - kafelki w rzędzie mają różną
   liczbę pozycji, a ceny i przyciski mają stać w jednej linii. */
.sh-foot {
  margin-top: auto;
  padding-top: 20px;
}

.sh-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sh-price strong { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.sh-price s { font-size: 15px; color: var(--sub); }

/* Kwoty i teksty prawne w --ink, nigdy w --sub - przygaszony szary wystarcza
   dla prozy, nie dla informacji, na podstawie której ktoś płaci. */
.sh-omnibus { font-size: var(--fs-small); color: var(--ink); margin-top: 8px; }
.sh-partial { font-size: var(--fs-small); color: var(--ink); margin-top: 8px; }
.sh-countdown { font-size: var(--fs-small); font-weight: 600; color: var(--acc); margin-top: 8px; }
.sh-countdown.is-over { color: var(--sub); font-weight: 400; }

.sh-cta { margin-top: 16px; width: 100%; justify-content: center; }

/* Wtórny przycisk, jak w auth.css i bug-report.css - .btn-ghost nie jest
   w arkuszu bazowym V2, więc każda strona, która go potrzebuje, nosi go
   u siebie. */
.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--hair);
  width: 100%;
  justify-content: center;
}
@media (hover: hover) { .btn-ghost:hover { background: color-mix(in srgb, var(--ink) 4%, var(--bg)); } }

/* ── pusto ──────────────────────────────────────────────── */

.sh-empty { text-align: center; padding: 64px 0 96px; }
.sh-empty p { color: var(--sub); margin-bottom: 24px; }

/* Torba jest duża, ale ma być tłem dla zdania, nie ilustracją zamiast niego -
   stąd rozcieńczony --sub zamiast pełnego. Na --hair (kolor obramowań) się nie
   da: w jasnym motywie to alfa .09 i glif w tej skali po prostu znika. */
.sh-empty-ic {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
  color: color-mix(in srgb, var(--sub) 38%, transparent);
}
/* Kreska w pikselach, nie w jednostkach viewBoksa: bez tego stroke-width="2"
   ze wzorca w pasku urósłby razem z ikoną (24 → 96 to skala 4×) i zamiast
   delikatnego obrysu wyszłaby ośmiopikselowa rura. vector-effect nie jest
   dziedziczone, więc idzie na ścieżki, a nie na <svg>. */
.sh-empty-ic path { stroke-width: 1.5; vector-effect: non-scaling-stroke; }

@media (max-width: 720px) {
  .sh-grid { grid-template-columns: 1fr; gap: 16px; }
  .sh-body { padding: 20px; }
  .sh-empty-ic { width: 72px; height: 72px; margin-bottom: 20px; }
}

/* W powłoce (#99 etap 8) telefon rozstrzyga kontener bloku, nie okno - ten sam
   próg co reszta powłoki. `@media` wyżej zostaje dla gościa, który powłoki nie
   ma. */
@container appshell (max-width: 720px) {
  .sh-app .sh-grid { grid-template-columns: 1fr; }
  .sh-app .sh-body { padding: 20px; }
}