/**
 * Extension detail – free / Pro pair (html/com_content/article/extension.php, tpl-related-product):
 * the "Add-on for the free …" chip under the title of the paid edition and the Free vs Pro table on both pages.
 * Scoped under .tp-ext-detail, prefix pxcmp-.
 */
.tp-ext-detail .pxcmp-addon { display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 16px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--ds-green-soft, #e6f8ec); color: var(--ds-green-ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.tp-ext-detail .pxcmp-addon:hover { text-decoration: underline; }
.tp-ext-detail .pxcmp-addon b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; font-size: 12px; }

.tp-ext-detail .pxcmp { margin: 0 0 96px; }
.tp-ext-detail .pxcmp-eyebrow { display: block; margin: 0 0 8px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ds-green-ink); }
.tp-ext-detail .pxcmp h2 { margin: 0 0 10px; font-size: clamp(1.7rem, 3vw, 2.2rem); letter-spacing: -.035em; color: var(--ds-navy); }
.tp-ext-detail .pxcmp-lead { margin: 0 0 28px; max-width: 680px; color: var(--ds-muted); }
.tp-ext-detail .pxcmp table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg, 20px); overflow: hidden; background: #fff; }
.tp-ext-detail .pxcmp th, .tp-ext-detail .pxcmp td { padding: 14px 20px; border: 0; border-bottom: 1px solid var(--ds-line); text-align: left; vertical-align: middle; font-size: 15px; font-weight: 400; color: var(--ds-text); background: none; }
.tp-ext-detail .pxcmp thead th { background: var(--ds-soft); font-weight: 700; color: var(--ds-navy); }
.tp-ext-detail .pxcmp thead th small { display: block; font-size: 13px; font-weight: 500; color: var(--ds-muted); }
.tp-ext-detail .pxcmp .c { width: 22%; text-align: center; }
.tp-ext-detail .pxcmp td.is-pro { background: #f3fcf6; }
.tp-ext-detail .pxcmp thead th.is-pro { background: var(--ds-navy); color: #fff; }
.tp-ext-detail .pxcmp thead th.is-pro small { color: #b9c1e0; }
.tp-ext-detail .pxcmp .yes { font-size: 18px; color: var(--ds-green-ink); }
.tp-ext-detail .pxcmp .no { font-size: 18px; color: #c4cad6; }
.tp-ext-detail .pxcmp tr.acts td { border-bottom: 0; padding: 20px; }
.tp-ext-detail .pxcmp .here { font-size: 13px; font-weight: 600; color: var(--ds-green-ink); }
.tp-ext-detail .pxcmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.tp-ext-detail .pxcmp-btn.is-green { background: var(--ds-green); color: #fff; }
.tp-ext-detail .pxcmp-btn.is-green:hover { background: var(--ds-green-hover, var(--ds-green)); }
.tp-ext-detail .pxcmp-btn.is-line { border: 1px solid var(--ds-line-strong); background: #fff; color: var(--ds-navy); }

@media (max-width: 767px) {
	.tp-ext-detail .pxcmp { margin-bottom: 64px; }
	.tp-ext-detail .pxcmp table { table-layout: fixed; }
	.tp-ext-detail .pxcmp th, .tp-ext-detail .pxcmp td { padding: 11px 8px; font-size: 13.5px; overflow-wrap: anywhere; }
	.tp-ext-detail .pxcmp th:first-child, .tp-ext-detail .pxcmp td:first-child { padding-left: 12px; }
	.tp-ext-detail .pxcmp .c { width: 27%; }
	.tp-ext-detail .pxcmp thead th { font-size: 13px; }
	.tp-ext-detail .pxcmp tr.acts td { padding: 14px 6px; }
	.tp-ext-detail .pxcmp-btn { min-height: 38px; padding: 6px 10px; font-size: 12.5px; white-space: normal; line-height: 1.2; }
}