.ag-managed-benefits {
    --ag-benefit-columns: var(--ag-benefit-desktop-columns);
    --ag-benefit-gaps: var(--ag-benefit-desktop-gaps);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    margin: 20px 0;
}
.ag-managed-benefit {
    flex: 0 1 calc((100% - var(--ag-benefit-gaps)) / var(--ag-benefit-columns));
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e6e8eb;
    border-radius: 8px;
    background: #fff;
    color: #171c20;
}
.ag-managed-benefit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: #f3f4f6;
}
.ag-managed-benefit__icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.ag-managed-benefit__text { min-width: 0; overflow-wrap: anywhere; }
.ag-managed-benefit strong { display: block; font-size: 13px; font-weight: 800; line-height: 1.4; }
.ag-managed-benefit small { display: block; margin-top: 3px; color: #667085; font-size: 12px; line-height: 1.5; }
.ag-managed-benefits--cart { margin-top: 20px; margin-bottom: 0; }
.ag-managed-benefits--drawer { margin: 20px 0; }
.ag-managed-benefits--drawer .ag-managed-benefit { background: #f8fafb; }
.ag-managed-content {
    margin: 24px 0;
    padding: 28px;
    border-radius: 9px;
    background: #181d21;
    color: #fff;
}
.ag-managed-content__body { max-width: 760px; }
.ag-managed-content h2 { margin: 0; font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; }
.ag-managed-content p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: #d2d7dc; white-space: pre-line; overflow-wrap: anywhere; }
.ag-managed-content a {
    display: inline-flex;
    max-width: 100%;
    margin-top: 16px;
    padding: 10px 16px;
    border-radius: 5px;
    background: var(--ag-red);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.ag-managed-content a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1100px) {
    .ag-managed-benefits:not(.ag-managed-benefits--drawer) {
        --ag-benefit-columns: 2;
        --ag-benefit-gaps: 16px;
    }
}
@media (max-width: 600px) {
    .ag-managed-benefits {
        --ag-benefit-columns: 1;
        --ag-benefit-gaps: 0px;
        gap: 10px;
    }
    .ag-managed-benefits:not(.ag-managed-benefits--drawer) {
        --ag-benefit-columns: 1;
        --ag-benefit-gaps: 0px;
    }
    .ag-managed-content { padding: 20px; }
    .ag-managed-content h2 { font-size: 20px; }
}
