/* T45 Guide shopping list - page layout only; visual tokens come from css/v2 */
.sl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: end; }
.sl .psb-hero > .psb-container > * + * { margin-top: 0; }
.sl-hero__body { display: grid; gap: 14px; }
.sl-hero .psb-hero__title--l { margin: 0; color: var(--text-display); }
.sl-actions .psb-pill { font-size: 13px; padding: 6px 14px; }
.sl-total { gap: 4px; }
.sl-total__k { font-size: 12px; text-transform: uppercase; color: var(--text-muted); }
.sl-total__big { font: 400 40px/1.1 var(--font-display); color: var(--text-display); }
.sl-total__sub { font-size: var(--fs-body-s); color: var(--text-secondary); }

.sl-disc { padding-block: 24px 8px; }
.sl-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; padding-block: 16px 72px; }
.sl-groups { display: grid; gap: 28px; }
.sl-group { display: grid; gap: 10px; }
.sl-group .psb-overline { color: var(--text-muted); font-family: var(--font-mono); font-weight: 500; }
.sl-group .psb-disclosure { display: none; }

/* checklist rows (build-products.js layout="checklist") */
.psb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.psb-check-row { display: grid; grid-template-columns: 24px 56px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 12px 16px 12px 14px; background: var(--bg-surface); border: var(--stroke); border-radius: 18px; box-shadow: var(--shadow-row); }
.psb-check-row[hidden] { display: none; }
.psb-check-row .psb-media { border-radius: 12px; }
.psb-check-row__tick input { width: 22px; height: 22px; margin: 0; accent-color: var(--pine-700); }
.psb-check-row__body { display: grid; gap: 2px; min-width: 0; }
.psb-check-row__body strong { font-size: 16px; }
.psb-check-row__body a { color: inherit; }
.psb-check-row__tag { padding: 3px 10px; border: 1.5px solid var(--ink-900); border-radius: var(--radius-pill); font: 700 12px/1.3 var(--font-body); color: var(--ink-900); white-space: nowrap; }
.psb-check-row__tag--must { background: var(--pine-100); }
.psb-check-row__tag--nice { background: var(--butter-100); }
.psb-check__price { font: 500 17px/1 var(--font-mono); min-width: 64px; text-align: right; }
.psb-check-row.is-have { background: var(--bg-subtle); box-shadow: none; }
.psb-check-row.is-have .psb-check-row__body strong { text-decoration: line-through; color: var(--text-muted); }
.psb-check-row.is-have .psb-btn { opacity: .5; }
.sl-anybrand { white-space: nowrap; }

.sl-card { gap: 12px; }
.psb .sl-card__h { font-size: 24px; color: var(--text-display); }
.sl-stats { margin: 0; display: grid; gap: 6px; }
.sl-stats div { display: flex; justify-content: space-between; font-size: var(--fs-body-s); }
.sl-stats dt { color: var(--text-secondary); }
.sl-stats dd { margin: 0; font-family: var(--font-mono); }
.sl-toggle { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--bg-subtle); font-weight: 700; font-size: var(--fs-body-s); }
.sl-toggle input { width: 18px; height: 18px; accent-color: var(--pine-700); }
.sl-rail { display: grid; gap: 16px; }
.sl-skip .psb-overline { color: var(--tomato-600); }
.sl-skip ul { margin: 0; padding-left: 1.1em; font-size: var(--fs-body-s); }
.sl-back { gap: 4px; background: var(--pine-100); color: var(--ink-900); text-decoration: none; --text-primary: var(--ink-900); }
.sl-back span { font-size: var(--fs-body-s); color: var(--pine-700); text-decoration: underline; }

@media (max-width: 1100px) {
    .sl-hero__grid, .sl-body { grid-template-columns: 1fr; }
    .sl-total { max-width: 420px; }
}
@media (max-width: 700px) {
    .psb-check-row { grid-template-columns: 22px 48px minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; }
    .psb-check-row__tag { grid-column: 3; justify-self: start; }
    .psb-check__price { grid-column: 2; grid-row: 2; text-align: left; font-size: 14px; }
    .psb-check-row .psb-btn, .sl-anybrand { grid-column: 3; justify-self: start; }
}

/* print: a clean paper checklist, no navigation, no buttons */
@media print {
    .psb-header, .psb-marquee, .psb-footer, .psb-cookie, .sl-actions, .sl-disc, .sl-rail, .psb-check-row .psb-btn, .psb-check-row .psb-media { display: none !important; }
    .sl-body { grid-template-columns: 1fr; }
    .psb-check-row { box-shadow: none; grid-template-columns: 24px 1fr auto auto; }
}