/* =================== hc-pdp-compat.css =================== */
.hc-pdp-compat {
margin-top: var(--hc-sp-4, 20px); padding: clamp(20px, 2.4vw, 28px); background: linear-gradient(160deg, #f3e9d6 0%, #ece0c9 100%); border-radius: 22px; position: relative; overflow: hidden
}
.hc-pdp-compat::before {
content: ""; position: absolute; top: 0; right: 0; width: 240px; height: 180px; background: radial-gradient(ellipse at top right, rgba(212, 184, 150, 0.4), transparent 60%); pointer-events: none
}
.hc-pdp-compat > * {
position: relative
}
.hc-pdp-compat__head {
display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: var(--hc-sp-3, 14px)
}
.hc-pdp-compat__title {
font-family: var(--hc-serif, "Playfair Display", Georgia, serif); font-weight: 500; font-size: 20px; margin: 4px 0 0; color: var(--hc-ink, #1a1714)
}
.hc-pdp-compat__sub {
font-size: 13px; color: var(--hc-ink-soft, rgba(26, 23, 20, 0.65)); margin: 6px 0 0
}
.hc-pdp-compat__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px
}
.hc-pdp-compat__item {
display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--hc-paper, #ffffff); border-radius: 12px; text-decoration: none; color: var(--hc-ink, #1a1714); transition: transform 0.2s ease
}
.hc-pdp-compat__item:hover {
transform: translateY(-2px)
}
.hc-pdp-compat__item-thumb {
width: 44px; height: 44px; background: var(--hc-bg-2, var(--hc-paper-3, #f2efe9)); border-radius: 8px; padding: 4px; flex: none
}
.hc-pdp-compat__item-thumb img {
width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply
}
.hc-pdp-compat__item-body {
display: flex; flex-direction: column; gap: 2px; min-width: 0
}
.hc-pdp-compat__item-kind {
font-family: var(--hc-mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.04em; color: var(--hc-accent-dark, #7a6548); text-transform: uppercase
}
.hc-pdp-compat__item-name {
font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap
}
.hc-pdp-compat__cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: var(--hc-sp-3, 14px); padding: 10px 18px; background: var(--hc-ink, #1a1714); color: #f8f6f3; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 500; transition: transform 0.2s ease
}
.hc-pdp-compat__cta:hover {
transform: translateY(-1px)
}

.hc-pdp-compat__item--requires .hc-pdp-compat__item-kind {
color: var(--hc-red, #c0392b)
}

.hc-pdp-compat__item--optional .hc-pdp-compat__item-kind {
color: var(--hc-green, var(--hc-success, #3d6b4f))
}