/* LisKup — dodatki do Tailwind + Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  user-select: none;
}
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html { scroll-behavior: smooth; }
img[src$="logo.svg"] { shape-rendering: geometricPrecision; }

/* --- typografia --- */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* --- powierzchnie: delikatny obrys zdjęć zamiast twardej ramki --- */
.img-ring { outline: 1px solid rgba(0, 0, 0, .08); outline-offset: -1px; }

/* --- interakcje --- */
.focus-ring:focus-visible,
.press:focus-visible,
.icon-btn:focus-visible,
.seg-item:focus-visible { outline: 2px solid #E8442E; outline-offset: 2px; }

.press { transition: transform .15s ease-out, background-color .15s ease-out; }
.press:active { transform: scale(.96); }

/* przycisk ikonowy — min. 44×44 */
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 9999px; color: #94a3b8;
  transition: transform .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.icon-btn:active { transform: scale(.96); }

/* pole tekstowe z linią akcentu bez przeskoku layoutu */
.field { outline: none; box-shadow: inset 0 -2px 0 #cbd5e1; transition: box-shadow .15s ease-out, background-color .15s ease-out; }
.field:focus { box-shadow: inset 0 -2px 0 #E8442E; }

.nav-link {
  align-items: center; gap: .25rem; min-height: 44px; padding: 0 .9rem;
  border-radius: 9999px; color: #475569; transition: background-color .15s ease-out;
}
.nav-link:hover { background: #f1f5f9; }

/* segmentowy przełącznik widoku / sortowania — zewnętrzny 16px = wewnętrzny 12px + padding 4px */
.seg { display: inline-flex; gap: 2px; padding: 4px; background: #e2e8f0; border-radius: 16px; }
.seg-item {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  min-height: 44px; min-width: 44px; padding: 0 .85rem; border-radius: 12px;
  font-size: .875rem; font-weight: 500; color: #475569;
  transition: background-color .15s ease-out, color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}
.seg-item:hover { color: #0f172a; }
.seg-item:active { transform: scale(.96); }
.seg-item.is-on { background: #fff; color: #C9331F; box-shadow: 0 1px 2px rgba(16,24,40,.12); }

/* karty — hover tylko na urządzeniach z kursorem */
.card { transition: box-shadow .2s ease-out, transform .2s ease-out; }
@media (hover: hover) {
  .card:hover { box-shadow: 0 0 0 1px rgba(16,24,40,.06), 0 12px 32px -6px rgba(16,24,40,.22); transform: translateY(-2px); }
  .card:hover .card-img:not(.crop-img) { transform: scale(1.03); }
  .card:hover .crop-img { transform: scale(1.18); }
}

/* kadrowanie zdjęć produktowych z dużymi białymi marginesami (rodzic ma overflow:hidden) */
.crop-img { transform: scale(1.12); }
.crop-img-sm { transform: scale(1.1); }

/* --- ruch: wejście z przesunięciem ~100ms między elementami; nie przy pierwszym malowaniu --- */
@keyframes enter { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.ready .enter { animation: enter .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }

@media (prefers-reduced-motion: reduce) {
  .ready .enter { animation: none; }
  .card, .card-img, .press, .icon-btn, .seg-item { transition: none; }
  .card:hover { transform: none; }
}

/* --- głosowanie --- */
.heart-btn {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0 .85rem;
  border-radius: 9999px; background: #f1f5f9; color: #64748b;
  transition: transform .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.heart-btn:hover { background: #fde3de; color: #C9331F; }
.heart-btn:active { transform: scale(.96); }
.heart-btn.is-on { background: #fde3de; color: #E8442E; }
.heart-btn.is-on .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.heart-btn:focus-visible, .rank-select:focus-visible { outline: 2px solid #E8442E; outline-offset: 2px; }
.rank-select { min-height: 44px; min-width: 56px; padding: 0 .5rem; border-radius: 12px; background: #f1f5f9; font-size: .875rem; font-weight: 500; }
.place-badge {
  position: absolute; top: 20px; left: 20px; z-index: 1; min-width: 36px; padding: 4px 10px; border-radius: 9999px;
  background: rgba(15,23,42,.85); color: #fff; font-weight: 700; font-size: .875rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.place-badge.is-first { background: #E8442E; }