/* Catalogue images are reused verbatim, apart from the generated truck scene. */
.help-design .help-catalog-visual { display: flex; flex-direction: column; height: auto; min-height: 0; background: var(--color-surface); }
.help-design .help-catalog-visual .help-truck-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.help-design .help-catalog-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; background: var(--color-surface); }
.help-design .help-catalog-products a { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px; border-radius: 8px; color: var(--help-navy); text-decoration: none; font-size: 12px; font-weight: 700; text-align: center; }
.help-design .help-catalog-products a:hover { background: var(--color-status-success-bg); }
.help-design .help-catalog-products img { width: 100%; height: 120px; object-fit: contain; margin-bottom: 8px; }
@media (max-width: 480px) { .help-design .help-catalog-products { gap: 4px; padding: 8px; } .help-design .help-catalog-products a { padding: 4px; } .help-design .help-catalog-products img { height: 100px; } }

/* Keep a shared-palette fallback for older cached palettes. */
.help-design { --help-navy: var(--color-retained-092a43, var(--color-brand-dark)); --help-lime: var(--color-retained-d7f45b, var(--color-brand-yellow)); --help-mint: var(--color-retained-e0f5ed, var(--color-status-success-bg)); --help-pink: var(--color-retained-ffe8ec, var(--color-status-error-bg)); }