/* The price cards printed (precios/cartulinas). Screen prefix py-crt-. */
/* A card per variant, its name and its published price, large enough to stand on the counter.
   On screen a preview on the desk; printed, two cards across on a page of its own (UI-418). */
.py-screen.py-crt { display: grid; gap: var(--py-5); align-content: start; }
.py-screen.py-crt .py-crt-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--py-2) var(--py-3); align-items: center; }
.py-screen.py-crt .py-crt-hint { grid-column: 1 / -1; }
.py-screen.py-crt .py-crt-title { font-family: var(--py-f-display); font-stretch: 112%; font-weight: 750; font-size: var(--py-s-1); }
.py-screen.py-crt .py-crt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--py-4); list-style: none; margin: 0; padding: 0; }
.py-screen.py-crt .py-crt-card {
  display: grid; grid-template-rows: auto 1fr; gap: var(--py-2); align-items: center;
  min-height: 13rem; padding: var(--py-4);
  background: var(--py-paper); color: var(--py-ink);
  border: 3px solid var(--py-ink); border-radius: 4px; box-shadow: var(--py-shadow-sheet);
  break-inside: avoid;
}
.py-screen.py-crt .py-crt-name { font-weight: 820; font-size: var(--py-s-2); line-height: 1.1; }
.py-screen.py-crt .py-crt-price { font-family: var(--py-f-display); font-stretch: 70%; font-weight: 800; font-size: var(--py-s-6); line-height: 1; font-variant-numeric: tabular-nums; text-align: center; }

@page py-crt { margin: 1cm; }
.py-screen.py-crt { page: py-crt; }
@media print {
  .py-screen.py-crt { padding: 0; gap: 0; }
  .py-screen.py-crt .py-crt-bar { display: none !important; }
  .py-screen.py-crt .py-crt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6cm; }
  .py-screen.py-crt .py-crt-card { min-height: 9cm; padding: 0.6cm; background: white; color: black; border-color: black; box-shadow: none; }
  .py-screen.py-crt .py-crt-name { font-size: 0.9cm; }
  .py-screen.py-crt .py-crt-price { font-size: 2.2cm; }
}