/* T03 Category / PLP (grow kits). Tokens only - no hard-coded colours except SVG art. */
.plp-hero { padding: 32px 0 24px; }
.plp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; margin: 16px 0 24px; }
.plp-hero__text { display: grid; gap: 12px; }
.plp-hero h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); color: var(--text-primary); }
.plp-hero .psb-lead { max-width: 640px; }
.plp-hero .psb-byline { gap: 8px 24px; color: var(--text-secondary); }
.plp-hero .psb-byline a { font-weight: 600; }

.plp-awards { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.plp-awards .psb-box { gap: 8px; padding: 14px 16px; min-width: 150px; justify-items: start; border-width: 1.5px; border-color: var(--border-default); }
.plp-awards strong { font-size: 15px; }
.plp-awards__score { font: 500 17px/1 var(--font-mono); color: var(--text-display); }

.plp-body { padding: 16px 0 72px; }
.plp-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.plp-side { display: grid; gap: 24px; }
.plp-filters { gap: 18px; border-width: 1.5px; border-color: var(--border-default); }
.plp-filters__h { font: 700 var(--fs-h5)/1.3 var(--font-body) !important; }
.plp-fgroup { display: grid; gap: 6px; }
.plp-fgroup__h { font: 700 var(--fs-caption)/1.3 var(--font-body) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px !important; }
.plp-check { display: flex; align-items: center; gap: 10px; padding: 3px 0; background: none; border: 0; color: var(--text-primary); font: 400 var(--fs-body-s)/1.4 var(--font-body); text-align: left; cursor: pointer; }
.plp-check { align-items: flex-start; }
.plp-check::before { margin-top: 2px; content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--border-ink); border-radius: 4px; background: var(--bg-surface); }
.plp-check[aria-pressed="true"]::before { background: var(--pine-500); border-color: var(--pine-500); box-shadow: inset 0 0 0 2px var(--bg-surface); }
.plp-check__n { color: var(--text-muted); }
.plp-check__l { min-width: 0; }
.plp-check:hover { text-decoration: underline; }

.plp-quiz { gap: 10px; }
.plp-quiz__h { font: 700 var(--fs-h5)/1.3 var(--font-body) !important; }
.plp-quiz p { font-size: var(--fs-body-s); color: var(--ink-700); }

.plp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 24px; min-height: 36px; }
.plp-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plp-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.plp-chip { display: inline-flex; gap: 4px; padding: 6px 12px; border: 0; border-radius: var(--radius-pill); background: var(--pine-100); color: var(--pine-700); font: 600 13px/1.2 var(--font-body); cursor: pointer; }
.plp-clear { font-size: 13px; font-weight: 600; color: var(--text-brand); text-decoration: underline; }
.plp-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.plp-sort__select { border: 0; background: transparent; color: var(--text-primary); font: 700 13px/1.3 var(--font-body); cursor: pointer; }
.plp-sort__select option { color: var(--ink-900); background: var(--cream-0); }

.plp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; padding-top: 10px; }
.plp-cell[hidden] { display: none; }
.plp-cell > .psb-grid { grid-template-columns: minmax(0, 1fr) !important; height: 100%; }
.plp-cell .psb-card { height: 100%; }
.plp-empty { margin-top: 16px; }
.plp-empty[hidden] { display: none; }
/* shared-fix candidate: .psb h3 outranks .psb-card__title in components.css */
.psb .psb-card__title { font: 700 19px/1.32 var(--font-body); letter-spacing: 0; }

.plp-table .psb-table th[scope="row"] { background: none; color: var(--text-primary); font: 700 var(--fs-body-s)/1.4 var(--font-body); padding: 14px 20px; border-top: 1px solid var(--border-default); letter-spacing: 0; }
.plp-table tbody tr:nth-child(even) th[scope="row"] { background: var(--bg-subtle); }
.plp-table td:last-child { text-align: right; white-space: nowrap; }
.psb .plp-table__note { margin-top: 12px; }

.plp-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

@media (max-width: 1200px) { .plp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
    .plp-hero__grid { grid-template-columns: 1fr; }
    .plp-awards { flex-wrap: wrap; }
}
@media (max-width: 900px) {
    .plp-layout, .plp-guide { grid-template-columns: 1fr; }
    .plp-side { display: contents; }
    .plp-filters { order: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plp-main { order: 1; }
    .plp-quiz { order: 2; }
    .plp-filters__h { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .plp-grid { grid-template-columns: 1fr; }
    .plp-awards .psb-box { min-width: 0; flex: 1 1 140px; }
    .plp-filters { grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
}

/* mobile: shared .psb-disclosure squeezes the "How we test" link into a narrow column (shared-fix candidate) */
@media (max-width: 600px) {
    .psb-disclosure { display: block; }
    .psb-disclosure::before { margin-right: 8px; }
    .psb-table th, .psb-table td { white-space: nowrap; }
}

/* Round 3 (Figma 86:1580): quick picks by scenario */
.plp-quick { display: flex; align-items: center; gap: 12px 20px; padding-block: 18px 6px; }
.plp-quick ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; flex: 1; }
.plp-quick a { display: grid; gap: 2px; height: 100%; padding: 10px 14px; border: var(--stroke); border-radius: 14px; background: var(--bg-surface); color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow-row); }
.plp-quick a:hover { transform: translate(-2px, -2px); }
.plp-quick small { font: 500 11px/1.4 var(--font-mono); text-transform: uppercase; color: var(--text-muted); }
.plp-quick strong { font-size: 15px; }
.plp-anchor { display: block; position: relative; top: -110px; }
@media (max-width: 1000px) { .plp-quick { flex-direction: column; align-items: stretch; } .plp-quick ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .plp-quick ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
    .plp-quick li { flex: 0 0 72%; scroll-snap-align: start; }
}