/* Layout block product_set („Produktsammlung“): cards reuse the large product box (.prod), rows the
   compact box (.prodc), both from aawp_product_box.css. No visual reference in 04-bausteine.html;
   the look is approved on staging. Badge colours from tokens.css. */

.pset-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pset-head .lb-head { margin-bottom: 0; }
.pset-ad { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pset-intro { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; }
.pset-list { display: grid; gap: 16px; }
.pset-kompakt .pset-list { gap: 10px; }
/* „Alle auf die Liste“ / „Kalender komplett übernehmen“ under the products, styled like the bundle box. */
.pset-acts { margin-top: 16px; }

/* Item without badge: its role in a neutral bar or pill. */
.prod-tag.role { background: var(--sunk); color: var(--ink); }
.badge-s.role { background: var(--sunk); border-color: var(--line); color: var(--ink); }

/* Cards: stacked boxes, buy row at the bottom so prices line up side by side. */
.pset-card { display: flex; flex-direction: column; }
.pset-card .prod-body { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pset-card .buy { margin-top: auto; }
.pset-card h3 { font-size: 18px; }

@container page (min-width: 640px) {
  .pset-karten.pset-n2 .pset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container page (min-width: 900px) {
  .pset-karten.pset-n3 .pset-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  /* Undo the side-by-side layout of the single large box. */
  .pset-card { display: flex; }
  .pset-card .prod-img { aspect-ratio: 4 / 3; height: auto; }
  .pset-card .prod-body { padding: 16px; }
  .pset-n3 .pset-card .prod-body { padding: 14px; }
  .pset-n3 .pset-card .buy { flex-direction: column; align-items: stretch; }
  .pset-n3 .pset-card .btn { text-align: center; }
}