/* =================== hc-sugg-prod.css =================== */
.hc-sugg-prod {display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: background 0.15s ease}
.hc-sugg-prod:hover, .hc-sugg-prod.is-active {background: rgba(139, 115, 85, 0.08)}
.hc-sugg-prod__thumb {display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); overflow: hidden; padding: 4px; color: var(--hc-muted, rgba(26, 23, 20, 0.3))}
.hc-sugg-prod__thumb img {width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply}
.hc-sugg-prod__body {display: flex; flex-direction: column; gap: 2px; min-width: 0}
.hc-sugg-prod__kicker {font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10.5px; letter-spacing: 0.04em; color: var(--hc-muted, rgba(26, 23, 20, 0.55))}
.hc-sugg-prod__kicker code {background: rgba(26, 23, 20, 0.04); padding: 1px 5px; border-radius: 4px; font-size: 10.5px}
.hc-sugg-prod__name {font-size: 13.5px; font-weight: 500; color: var(--hc-ink, #1a1714); overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.hc-sugg-prod__price {font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 14px; color: var(--hc-ink, #1a1714); white-space: nowrap}