/**
 * Compatibility Icons - Inline SVG Styles
 * Theme-independent compatibility icon rendering for product pages
 */

/* DEM Compatibility Area Styling (theme-independent) */
.dem-compatibility-header {
    margin: 0;
    width: auto;
    float: none;
}

.dem-compatibility-area {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin: 0;
    vertical-align: middle;
    width: auto;
}

.dem-compatibility-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.dem-compatibility-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    line-height: 1;
}

.dem-compatibility-icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

/* Override row-level inline rule that forces 16px icons on single product pages. */
.single-product .summary .dem-price-compat-row .dem-compatibility-icon svg {
    width: 26px;
    height: 26px;
}

/* Price + compatibility row on single product summary */
.single-product .summary .dem-price-compat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 10px 0;
}

.single-product .summary .dem-price-compat-row > p.price {
    margin: 0;
    line-height: 1.2;
}

.single-product .summary .dem-price-compat-row .dem-compatibility-header {
    margin: 0 0 0 auto;
    float: none;
}